Question

我有一个表，当单击任何行时，会启动一个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;
});

我第一次单击一条记录时工作正常，但是如果我单击取消并尝试编辑另一条记录，则会出现对话框（具有正确的记录详细信息）但是，对话框中没有脚本可用 - 例如：有一个jqueryUI datepicker输入和一些验证。

没有javascript错误，而且由于我对FireBug的理解有限，我无法发现任何错误，所以我很感激一些建议如何继续，谢谢！

编辑：唉！有时，它需要在这里打字来发现明显的东西。我刚刚意识到，当盒子关闭时，为对话框创建的DIV不会被破坏。我添加了一行来做这个，它现在有效。谢谢收听。：）的的

为了将来参考，我在“var dialog”中创建的DIV中添加了一个ID，并在Cancel函数中将其删除：

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

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

Answer 1

我修复了它：当对话框关闭时，为对话框创建的DIV不会被破坏。

我在'var dialog'中创建的DIV中添加了一个ID，并在Cancel功能中删除了DIV：

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

Answer 2

您只能一次创建对话框，而不是每次加载其内容时，只需将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;
}};

jQueryUI模式对话框中的脚本只能运行一次

2 个答案: