Question

我有一个删除按钮。单击按钮时，我想生成第二个按钮以确认用户确实要删除某些内容。但是：当点击第二个按钮时，$('.deleteConfirmed').click(function() {不会触发。

我不确定JQuery是如何工作的，但我的猜测是因为点击监听器是在第二个按钮存在之前创建的，对吗？如果这是真的，那么点击第二个按钮deleteEntityConfirmed(id)会是什么解决方案？

我猜你可以在第二个按钮上使用HTML的onclick属性来实现它，但是JQuery是否为这种情况提供了更优雅的解决方案？

以下是一些显示我的方案的代码，我试图仅保留相关部分。

HTML：

<button class="delete" data-id="5">
  Delete
</button>

<div id="somewhere"></div>

JS：

$(function() {
  $('.delete').click(function() {
    var id = $(this).data('id');
    $('#somewhere').empty().append('<button class="deleteConfirmed" data-id="' + id + '">I\'m sure I want to delete</button>');
  });


  $('.deleteConfirmed').click(function() {
    alert("debug message"); // we don't get here when clicking the second button. It seems to not be listening to it
    var id = $(this).data('id');
    deleteEntityConfirmed(id);
  });

});

function deleteEntityConfirmed(id){
    // If we'd get here after clicking the second button, this would be full success
    alert("Deleting id " + id);
}

Answer 1

你必须做事件委托。使用on()表示动态生成的元素。

$(document).on("click", ".deleteConfirmed", function() {
    var id = $(this).data('id');
    $('#somewhere').empty().append('<button class="deleteConfirmed" data-id="' + id + '">I\'m sure I want to delete</button>');
  });

了解更多http://api.jquery.com/on/

在JQuery中单击生成元素的函数

1 个答案: