加载div后，对话框jquery ui不会再次打开

Question

我有一个表格中的调查结果列表。每个条目都有一个 EDIT 按钮，单击该按钮会打开一个对话框，其中包含从数据库加载的调查结果。编辑完答案后，我想点击对话框中的“保存”按钮，然后将编辑后的答案保存在数据库中，仅刷新我网站上的调查结果表。

当我重新加载整个页面时，一切正常，但是当我尝试只刷新表格时，我无法通过单击编辑按钮再打开对话框。

到目前为止，这是我的代码：

jQuery(document).ready(function($) {
$('body').on('click', '.edit_button', function () {
$("#dialog").dialog({

    autoOpen: false,
    width: 'auto',        
    buttons: {
        SAVE: function () {

            $.ajax({
                type: "POST",
                url: "admin/ajaxMethod/" + id,
                data: $('form.cForma1').serialize(),
                success: function () {                        
                    alert("success");

                    $("#tabela").load(location.href + " #tabela");
                    $("#dialog").dialog("close");
                },
                error: function () {
                    alert("failure");
                },                    
            });
        },
        CANCEL: function () {
            $(this).dialog("close");                
        },            
    }
});
});
});

当我输入 location.reload(); 而不是 $("#tabela").load(location.href + " #tabela"); $("#dialog").dialog( "close" ); 时，一切正常，但我只需要一个 div 即可重新加载表 div。

Answer 1

您正在通过页面中的$('yourEDITbutton').click(..) 将您的事件绑定到您的按钮。

您的javascript 代码不再起作用，因为您的按钮是动态创建的，而.click(..) 不适用于动态创建的元素。这里的解决方案如下：

$('body').on('click', '.yourEDITbuttonClass', function () {
    // Open your dialog box here
});

更详细的解释见jQuery documentation for .on()。

Answer 2

这听起来像是一个经典的 jQuery 事件绑定错误：

您将对话框绑定到单击“编辑”按钮。然后你重新加载表，之前的事件绑定就消失了。您要么需要再次绑定点击事件，要么将事件绑定到页面上未重新加载的元素，例如：

$(document).on('click', '.edit_button', function() {
    $('#dialog').dialog({ ... });
});