Javascript 动态添加的输入未在屏幕上更新

我是JavaScript新手，请在这里耐心等待

下面的代码检查文本输入字段的值，如果匹配，则启动显示对话框模式窗口的自定义对话框对象/函数

现在，我的目标是清除触发对话框打开的文本输入，如果单击

Cancel

按钮

我有一个名为

cancelCallback

的回调函数，我可以将它传递到我的对话框函数中

在我的示例中，您可以看到我缓存了输入字段选择器

hostnameSelector

，然后将其传递到回调中

下面您可以看到我将对象打印到控制台。控制台显示文本字段的新值，但不会在屏幕上更新

这可能是因为文本输入字段被动态添加到screen/DOM

有什么办法让它工作吗？如果需要帮助，我还可以使用最新的jQuery

// Show Notice if Hostname Matches the Domain Name
$(document).on('change','div.hostName > input',function() {

    // cached Input Selector
    var hostnameSelector = $(this);

    var hostName = $(this).val();
    var domainName = $("#domainName").val();
    var pattern = new RegExp(domainName + "$","g");
    if ( hostName.match(pattern) != null ) {

        var msg = 'Are you sure you want to delete action?';

        zPanel.dialog.confirm({
            heading: 'ATTENTION',
            message: msg,
            width: 300,
            cancelCallback: function (hostname) {
                    hostnameSelector .value = 'hi';
                    console.log(hostnameSelector);
            },
            cancelButton: {text: 'Cancel', show: true, class: 'btn-default'},
            okButton: {text: 'Confirm', show: true, class: 'btn-primary'},
        });

    }
});

---

CancelCallback应通过调用以下命令来设置新值：

hostnameSelector.val("hi")

---

谢谢，我很高兴这是一个简单的错误