单击按钮后 Javascript 属性未更新

Question

我有一个用于删除确认的 Bootstrap 模式。在我提交条目后删除它不会再次工作，直到我重新加载页面。我正在使用 javascript 来观察按钮的点击。 id 属性被传递给另一个函数并通过 ajax 提交。 data-id 属性没有更新，仍然有旧的按钮数据 id。

我不确定如何在不重新加载页面的情况下重置 id 属性。任何帮助表示赞赏。抱歉，刚接触编码。

这是按钮代码: <button type="button" data-toggle="modal" data-target="#confirm_delete_modal" name="delete_btn" id="' + clockData.id + '" class="btn btn-xs btn-danger btn_delete"></button>

这是JS:

//Trigger Delete Confirmation Modal
$(document).on('click', '.btn_delete', function () {
  var id = $(this).attr('id');
 $('#delete_confirm').attr('id', id); //set the data attribute on the modal button

});

// Trigger Ajax delete function
$('#delete_confirm').click(function(){
var id = $(this).attr('id');

    $.ajax({
            url: "/clock/delete",
            method: "POST",
            data: {id: id},
            success: function (data) {

                $('#confirm_delete_modal').modal('hide');
                search_data();

            }
        })
});

Answer 1

第一次运行后，(之前)#delete_confirm 按钮的 id 属性实际上发生了变化，因为您正在通过 $(' #delete_confirm').attr('id', id);.当 .btn_delete 处理程序第二次运行时，没有 #delete_confirm 来更改 id，因为它现在是 id 从第一次删除按钮点击。

您实现的最佳解决方案是使用 data-id 属性，而不是实际的 id 来跟踪单击了哪个删除按钮。

$(document).on('click', '.btn_delete', function () {
  var id = $(this).attr('id');
 $('#delete_confirm').data('id', id); //set the data attribute on the modal button
});

// Trigger Ajax delete function
$('#delete_confirm').click(function(){
  var id = $(this).data('id');

  $.ajax({
    url: "/clock/delete",
    method: "POST",
    data: {id: id},
    success: function (data) {

      $('#confirm_delete_modal').modal('hide');
      search_data();

    }
  })
});