Question

我有一个MVC应用程序，我将我们的记录写入表格。在每条记录上都有一个＆＃34;删除＆＃34;我想从中调用Ajax的按钮。但是，我有一些令人困惑的结果。

最初我将其设置为在按钮上使用CSS类来启动一些Ajax。该表是通过_PartialView插入的，这可能是他问题的一部分。此代码正常工作，直到我实际调用Ajax函数，该函数在删除已删除的记录后重新加载表。部分视图重新加载后，onClick将不再有效。

这是我的HTML，我使用按钮上的removeEmp类与Ajax一起使用。

<td>
    <button id="btnDelete" class="btn btn-sm btn-danger removeEmp">
        <i class="far fa-trash-alt"></i> Delete
    </button>
    @Html.Hidden("RID",item.RID, new { @class = "rid"})
</td>

这是我创建的原始Ajax调用，它一直有效，直到你实际调用Ajax，它会在删除记录后重新加载表。我使用Bootbox显示我的确认框。

$('.removeEmp').click(function (e) {

    alert('clicked');

    var rid = $(this).siblings(".rid:hidden").val();
    var empId = $(this).closest("tr").children('td.empid').text();
    var url = "/Employee/EmployeeRemoveAccess/?" + $.param({ "employeeId": empId, "rid": rid });            

    bootbox.confirm({
        message: "Are you sure you want to delete this employee?<br /><strong>" + fullName + " (" + empId + ")</strong>",
        buttons: {
            cancel: {
                label: '<i class="far fa-times-circle"></i> Cancel'
            },
            confirm: {
                label: '<i class="far fa-check"></i> Confirm',
                className: 'btn-success'
            }
        },
        callback: function (result) {
            if (result === true) {
                $.ajax({
                    url: url,
                    type: "POST",
                    success: function (response) {
                        $("#divLoading").hide();
                        $("#accessListWrapper").html(response);
                    },
                    error: function (xhr) {
                        $("#divLoading").hide();

                        if (xhr.status == 500) {
                            alert('Error Code: ' + xhr.status + '\nError: Internal Server Error;');
                        }
                        else {
                            alert('Error Code: ' + xhr.status);
                        }
                    }
                });
            }
        }
    });

});

在研究这个问题时，我读了一些帖子，说你必须使用.on（＆＃39;点击＆＃39;）来动态创建表格。所以，我将选择器更改为以下内容，并得到相同的结果。它将显示＆＃34; alert＆＃34;和bootbox确认，然后删除记录，重新加载局部视图，然后＆＃34;删除＆＃34;重新加载后按钮不会显示或显示任何内容。控制台中也没有错误。

$('.removeEmp').on('click',(function (e) {

    alert('clicked');
....
}));

Answer 1

这应该这样做，不需要在函数前面加上额外的括号

$(document).on('click','.removeEmp',function (e) {

    alert('clicked');
....
});

Answer 2

试试这个：

$(document).find('.removeEmp').on('click', function (e) {
    //...
});

使用按钮OnClick来混淆从带按钮的按钮调用Ajax？

2 个答案: