jQueryUI模态对话框中的脚本只工作一次

Script within a jQueryUI modal dialog box only works once

本文关键字：一次 工作 对话框 模态 脚本 jQueryUI      更新时间：2023-09-26

我有一个表，当单击任何一行时，启动一个jQueryUI模态对话框，允许用户编辑该记录。我使用下面的脚本，似乎工作，成功地加载相关记录的详细信息在使用AJAX:

$("#datatbl tr").bind('click', function() {        
        var url = 'item_edit.asp?id='+$(this).attr("data-myid");
        var dialog = $('<div style="display:hidden" title="Record details:"></div>').appendTo('body');
        // load remote content
        dialog.load(
            url, 
            {},
            function (responseText, textStatus, XMLHttpRequest) {
                dialog.dialog({         
                    height: 440,
                    width: 550,
                    autoOpen: false,
                    modal: true,
                    buttons: {
                        "Update this record": function() {
                         $('#editform').submit();
                            },
                        Cancel: function() {
                        $( this ).dialog( "close" );
                        }
                    }
        });
        dialog.dialog('open');
            }
        );
        //prevent the browser to follow the link
        return false;
});

它的工作ok的第一次我点击一个记录，但如果我点击取消，并尝试编辑另一个记录，对话框确实出现(与正确的记录细节)然而，对话框内没有脚本工作-例如:有一个jqueryUI日期拾取器输入和一些验证。

没有javascript错误，从我对FireBug的有限理解来看，我不能发现任何错误，所以我很感激一些如何继续的建议，谢谢!

<我>编辑:啊!有时，需要像在这里输入这样的东西才能发现显而易见的东西。我刚刚意识到，当对话框关闭时，为对话框创建的DIV不会被销毁。我添加了一行来做这个，现在它可以工作了。谢谢你的聆听。:)

为了将来参考，我在'var dialog'中创建的DIV中添加了一个ID，并在Cancel函数中删除了它:

Cancel: function() {
                        $( this ).dialog( "close" );
                        $('#dialogbox').remove();
                        }

如果有人建议一个更好的方法来处理这个行为，我仍然很感激。

我修复了这个问题:当对话框关闭时，为对话框创建的div不会被销毁。

我在'var dialog'中创建的DIV中添加了一个ID，并在Cancel函数中删除了DIV: 

Cancel: function() {
                        $( this ).dialog( "close" );
                        $('#dialogbox').remove();
                        }

您可以只创建一次对话框，而不是每次加载它的内容，只需将autoOpen设置为false。

<div id="dialog">
    <div id="content" style="display:hidden" title="Record details:"></div>
</div>
$('#dialog').dialog({
    height: 440,
    width: 550,
    autoOpen: false,
    modal: true,
    buttons: {
        "Update this record": function() {
            $('#editform').submit();
        },
        Cancel: function() {
            $( this ).dialog( "close" );
        }
    }
});
$("#datatbl tr").bind('click', function() {        
    var url = 'item_edit.asp?id='+$(this).attr("data-myid");
    // load remote content
    $('#content').load(url);
    $('#dialog').dialog('open');
    return false;
}};
相关文章：