Javascript 方法，只提供第一个输入的值

我正在使用jQueryUI对话框输入图像的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>

var img=“”；
img+=''；
img+=“图像URL:”；
img+=''；
$（'#dlg'）。单击（函数（）{
$（img）.对话框（{按钮：{'Ok'：函数（）{
var值=$（“#txt”）.val（）；
var http=value.substr（0,7）；
警报（值）；
$（this.dialog（'close'）；
}}},
{closeOnEscape:true，可调整大小：false，宽度：600，高度：200
});
});

当我按下

（）

按钮时，会出现一个对话框，其中有一个文本框输入字段。当我在文本字段中输入任何值时，它会提醒该值。但当我第二次或第三次按下按钮并在对话框的文本框中输入其他值，然后按OK时，它会提醒我第一次输入的值。因此，无论我点击按钮多少次并输入任何值，它都会提醒我第一次输入的值

我是否得到文本框值

var value=$（“#txt”）.val（）使用此方法是否正确？
如果是，那么为什么它会给我第一次输入的值

注意：我已多次清除浏览器的缓存，因此不可能出现任何缓存问题。
问题是每次调用它时，您都在制作对话框的新副本。这意味着您有多个同名的元素。为了避免在关闭对话框后需要销毁它

更改：

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

到

另一种选择是创建元素一次，然后重用它
 问题是每次调用它时，您都在制作对话框的新副本。这意味着您有多个同名的元素。为了避免在关闭对话框后需要销毁它

更改：

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

到

另一种选择是创建元素一次，然后重用它
 在我看来，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');
}}},

在我看来，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');
}}},

这是因为每次创建对话框时，您都在创建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
 });

这是因为每次创建对话框时，您都在创建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
 });

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

我是否得到文本框值
var value=$（“#txt”）.val（）使用此方法是否正确

对

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

因为
$（“#txt”）
引用DOM中具有该id的第一个元素。每次单击时，您都会从
img
字符串动态创建元素，并通过
对话框
小部件将其附加到DOM中。但是，调用其
close
方法只会隐藏它们，而不会将它们从DOM中删除，因此单击处理程序总是从第一个创建的输入中提取其
值

请尝试调用以下命令：

或者只创建一次对话框，每次单击时打开它

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

我是否得到文本框值
var value=$（“#txt”）.val（）使用此方法是否正确

对

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

因为
$（“#txt”）
引用DOM中具有该id的第一个元素。每次单击时，您都会从
img
字符串动态创建元素，并通过
对话框
小部件将其附加到DOM中。但是，调用其
close
方法只会隐藏它们，而不会将它们从DOM中删除，因此单击处理程序总是从第一个创建的输入中提取其
值

请尝试调用以下命令：

或者只创建一次对话框，每次单击都打开它。
这是因为您创建了多个对话框，并且从不销毁或删除它们，因此您的输入会得到重复的ID，并且始终会得到第一个。您需要在onclose中正确清理对话框，或者停止在每次单击按钮时重新创建对话框。这是因为您正在创建多个对话框，并且从未销毁或删除它们，因此您的输入会得到重复的ID，并且您总是会得到第一个。您需要在onclose中正确地清理对话框，或者停止在每次单击按钮时重新创建对话框。哈哈，别担心，我更喜欢@epascarello answer。它干净多了。哈哈，没关系，我更喜欢@epascarello回答。它干净多了。