Question

我有一个用于删除确认的引导程序模式。提交条目后，删除它将无法再次工作，直到我重新加载页面。我正在使用javascript观看按钮单击。 id属性传递给另一个函数，并通过ajax提交。尚未更新的data-id属性，但仍具有旧的按钮data-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

第一次运行后，（先前）id按钮的#delete_confirm属性实际上正在更改，因为您是通过$('#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();

    }
  })
});

Answer 2

使用data('id')获取属性data-id

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

单击按钮后Javascript属性未更新

2 个答案: