Question

我正在使用jQuery UI对话框输入Image的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" />)按钮时，会出现一个带有文本框输入字段的对话框。当我在文本字段中输入任何值时，它会提醒该值。但是当我按下按钮第二次或第三次并在对话框的文本框中输入其他值时，按OK，它会提醒我第一次输入的值。所以，无论我多少次点击按钮并输入任何值，它都会提醒我第一次输入的值。

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

注意：我已多次清除浏览器的缓存，因此不存在任何缓存问题。

Answer 1

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

变化：

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

要

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

其他选项是创建元素一次而不是重复使用它。

Answer 2

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

Answer 3

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

Answer 4

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

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

是

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

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

请尝试拨打destroy method：

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

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

jQuery .val（）方法只给我第一个输入的值

4 个答案: