0

我正在使用 jQuery UI 对话框输入图像的 URL。我正在使用以下方法：

 <input id="dlg" value="Open Dialog" type="button" />

<script type="text/javascript">
var img = '<div id="dialog" title="Insert Image" style="width:500px;height:300px">';
img += '<table><tr><td style="width:100px">';
img += 'Image URL: </td><td><input id="txt" type="text" value="" size="52" /></td>';
img += '</tr></table></div>';

$('#dlg').click(function(){

$(img).dialog({buttons: {'Ok':function(){
    var value = $("#txt").val();
    var http = value.substr(0,7);

    alert(value);

    $(this).dialog('close');
}}},

 { closeOnEscape:true, resizable:false, width:600, height:200

 });


});
</script>

当我按下(<input id="dlg" value="Open Dialog" type="button" />)按钮时，会出现一个对话框，其中包含一个文本框输入字段。当我在文本字段中输入任何值时，它会提醒该值。但是当我第二次或第三次按下按钮并在对话框的文本框中输入一些其他值，然后按确定时，它会提醒我第一次输入的值。所以，无论我点击按钮多少次并输入任何值，它都会提醒我第一次输入的值。

我var value = $("#txt").val();是否使用此方法正确获取文本框值？如果是，那么为什么它给了我第一次输入的值。

注意：我已经多次清除浏览器的缓存，所以不会出现任何缓存问题。

4

4 回答 4

2

问题是每次调用它时，您都在制作对话框的新副本。这意味着您有多个具有相同名称的元素。为避免这种情况，您需要在关闭对话框后将其销毁。

改变：

$(this).dialog('close');

到

$(this).dialog('close').dialog("destroy");

其他选择是创建元素一次然后重用它。

于 2013-04-12T15:18:54.173 回答
1

在我看来，txt 项目被多次创建。完成后，您需要从 DOM 中删除该项目。

在这个部分

$(img).dialog({buttons: {'Ok':function(){
    var value = $("#txt").val();
    var http = value.substr(0,7);

    alert(value);

    // save value somewhere

    $("#txt").remove();

    $(this).dialog('close');
}}},
于 2013-04-12T15:19:34.143 回答
1

这是因为每次创建对话框时都在创建 dom 结构，所以每次请求时都会获取第一个创建的输入框$("#txt")。

所以解决方案是在小部件关闭时删除完整的dom结构

$(img).dialog({
    buttons: {
        'Ok':function(){
            var value = $("#txt").val();
            var http = value.substr(0,7);

            alert(value);

            $(this).dialog('close');
        }
    },
    close: function(){
        $(this).remove()
    },

    closeOnEscape:true, 
    resizable:false, 
    width:600, 
    height:200
 });
于 2013-04-12T15:21:59.027 回答
1

无论我点击按钮多少次并输入任何值，它都会提醒我第一次输入的值。

我var value = $("#txt").val();是否使用此方法正确获取文本框值？

是的。

如果是，那么为什么它给了我第一次输入的值。

因为$("#txt")指的是 DOM 中具有该 id 的第一个元素。每次单击时，您都可以从img字符串动态创建元素，并通过小部件将它们附加到 DOM dialog。然而，调用它的close方法只会隐藏它们，但不会将它们从 DOM 中删除，因此点击处理程序总是value从第一个创建的输入中提取它。

尝试调用该destroy方法：

$(this).dialog('close').dialog("destroy"); // not sure whether the "close" is still necessary

或者您只创建一次对话框，open每次点击都会创建。

于 2013-04-12T15:22:43.783 回答