动态添加的 Jquery 删除按钮不起作用

Question

这无疑很简单，但是我对 jquery 的了解不足，这对我来说很复杂。基本上我有这个代码：

$(document).ready( 
    function() {
    $( "#remove")
    .click(function() {
        alert("I have been clicked!");
        $(this).parent().parent().remove();
    }); 
});

我在表格中添加了一个按钮来删除它的行（参见上面的代码）。按钮如下：

<td ><button id='remove' type='button'>Remove</button></td>

但是，单击时它什么也不做。我认为这可能与加载文档后创建按钮的事实有关......不过，不知道该怎么做。

Answer 1

$( "td").on('click', '#remove', function() {
        alert("I have been clicked!");
        $(this).parent().parent().remove();
    }); 

当您尝试动态添加按钮时，您需要委托事件处理程序（又名实时事件）。

jQuery > 1.7 中的一个委托事件声明为

$(container).on(eventName, target, handlerFunction);

更多详情见.on()

你有另一个选项叫做.delegate()，它的声明过程是：

$(container).delegate(target, eventName, handlerFunction);

所以对于你的情况，它看起来像：

$('td').delegate('#remove', 'click', function() {
      alert("I have been clicked!");
      $(this).parent().parent().remove();
});

注意

这里的container 表示页面加载时属于DOM 的#remove 按钮的持有者。从你的帖子看来td，你可能还有别的东西（任何有效的jQuery selectors）

如果您无法检测到您的 container for #remove，请使用 $(document) 或 $('body') 而不是 $('td')。