jQuery .on在ajax刪除和div刷新后不起作用

Question

在帶有選項卡控件的頁面上，每個選項卡都包含一個表，每個tr包含一個帶有按鈕的td，該按鈕具有為其分配值。

<td>
 <button type="button" class="btn" name="deleteEventBtn" value="1">Delete</button>
</td>

以下代碼適用於第一次刪除。 在AJAX調用和div刷新后，無法單擊其他刪除按鈕。 .on附加到文檔中。 如果將其連接到主體或按鈕附近的任何東西，也會發生相同的情況。

function deleteRecord(url, id, container) {
    $.ajax({
        type: "POST",
        url: url,
        data: { id: id },
        success: function (data) {         
            $('#delete-popup').hide();
            $(container).trigger('refresh');
        }
    }); 
}

$(document).ready(function () {
        $(document).on('click', '[name^="delete"]', function (e) {
            e.preventDefault();
            var id = $(this).val();
            $('#current-record-id').val(id);
            $('#delete-popup').modal('show');
        });

        $('#delete-btn-yes').on('click', function (e) {
            e.preventDefault();          
            var recordId = $('#current-record-id').val();
            var recordType = location.hash;
            switch (recordType) {
                case "#personList":
                    deleteRecord(url, recordId, recordType);
            break;
            }
        });
});

有任何想法嗎？ 可能與以[name ^ =“ delete”]開頭的通配符相關嗎？ 名稱沒有其他以“ delete”開頭的元素。

編輯

更換時

$(container).trigger('refresh'); 

與

location.reload();

它“起作用”，但是刷新了整個頁面，失去了用戶位置，使使用AJAX失去了意義。

Answer 1

由於按鈕單擊是第一次觸發，因此該代碼中沒有問題。 您所要做的就是將按鈕單擊事件放入方法中，並在刷新后調用它。 這樣，事件將再次附加到元素。 參見下面的代碼，

function deleteRecord(url, id, container) {
    $.ajax({
        type: "POST",
        url: url,
        data: { id: id },
        success: function (data) {         
            $('#delete-popup').hide();
            $(container).trigger('refresh');
          BindEvents();
        }
    }); 
}

$(document).ready(function () {
        BindEvents();
});

function BindEvents()
{
  $(document).on('click', '[name^="delete"]', function (e) {
            e.preventDefault();
            var id = $(this).val();
            $('#current-record-id').val(id);
            $('#delete-popup').modal('show');
        });

        $('#delete-btn-yes').on('click', function (e) {
            e.preventDefault();          
            var recordId = $('#current-record-id').val();
            var recordType = location.hash;
            switch (recordType) {
                case "#personList":
                    deleteRecord(url, recordId, recordType);
            break;
        });
  }

Answer 2

向所有人致歉，並感謝您的回答。 問題是由於彈出窗口的顯示和隱藏方式所致。

$('#delete-popup').modal('show');

和

$('#delete-popup').hide();

當我將此行更改為：

$('#delete-popup').modal('hide');

有效。 感謝LShetty，警報（在正確的位置）確實提供了幫助！

Answer 3

如果您使用的是Ajax之后的Bootstrap Modal，請在刷新之前添加頁面

$('.modal').modal('hide');

該行將關閉您的模式並重新加載您的頁面。 在此之前，它將完成所有Ajax Request事務。

但對於谷歌瀏覽器沒有問題:)希望這對某人有所幫助。