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 ^ =＆＃34; delete＆＃34;]的开头相关的通配符？没有其他元素名称以＆＃39; delete＆＃39;。

开头

修改

更换时

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

带

location.reload();

它＆＃34;工作＆＃34;然而，它会刷新整个页面，失去用户的位置，并且无法使用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

如果您使用的是Bootstrap Modal 在刷新页面之前的Ajax请求之后添加

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

此行将关闭您的模态并重新加载您的页面。在此之前，它将完成所有Ajax请求的事情。

但对于谷歌浏览器没有任何问题:)希望这有助于某人。

jQuery .on在ajax delete和div刷新后没有工作

3 个答案: