jquery - 动态添加的 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();
    }); 

当您尝试动态添加按钮时，您需要委托(delegate)事件处理程序(也称为实时事件)。

jQuery > 1.7 中的委托(delegate)事件声明为

$(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按钮的持有者。从您发布的内容来看，您可能还有其他内容(任何有效的 jQuery selectors )

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