Question

我正在尝试使用jquery和html制作动态表。基本上它是做什么的，从输入的文本它附加一个新行，文本n一个单元格和一个删除按钮在另一个单元格。但我的问题是输入的click事件没有触发。以下是添加和删除行的脚本

//Remove Row    
$('.remove-row').click(function () {
    alert('Works!');
});

//Add Row
$('.add-other-sources').click(function () {
    var $text=$(this).parent().parent().find('.other-sources-input');
    var $table=$(this).parent().parent().parent().find('.other-sources-table')
    $('<tr><td>'+$text.val()+'</td><td><input type="button" class="remove-row" value="x"/></td></tr>').fadeIn('slow').appendTo($table);
    $text.val("");
});

从我在Web检查器上可以看出，输入的标记显示为<input type="button" class="remove-row" value="x">。它是否与remove row事件不起作用有关？

有没有人知道如何解决这个问题？提前致谢

Answer 1

您需要一个委派的事件处理程序：

//Remove Row    
$('table').on("click", ".remove-row", function () {
    alert('Works!');
});

原因是普通处理程序仅附加到已存在的元素。使用委托处理程序，click将附加到父元素，但只有当源从您指定的选择器冒泡时才会执行该函数。

Answer 2

如果要将事件附加到动态创建的元素，则需要委派事件。

$(staticContainer).on('click', '.remove-row',function () {

StatucContainer可以是HTML中始终存在的任何容器。越接近有问题的元素，表现越好。

动态生成的输入不起作用

2 个答案: