Question

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

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

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

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来重新加载表格。

Answer 1

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

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

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

Answer 2

您可以通过页面中的$('yourEDITbutton').click(..)将活动绑定到按钮上。

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

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

有关详细说明，请参阅jQuery documentation for .on()。

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

2 个答案: