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

Question

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

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

这是我到目前为止的代码:

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

这听起来像是一个经典的 jQuery 事件绑定(bind)错误:

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

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