是否對使用按鈕OnClick從帶表的按鈕調用Ajax感到困惑？

Question

我有一個MVC應用程序，正在將我們的記錄寫到表中。 在每條記錄上都有一個“刪除”按鈕，我想從中調用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（'click'）。 因此，我將選擇器更改為以下內容，並且得到了相同的結果。 它將顯示“警報”並確認啟動箱，然后刪除記錄，重新加載部分視圖，但是在重新加載后“刪除”按鈕不起作用或不顯示任何內容。 控制台中也沒有錯誤。

$('.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) {
    //...
});