1

我正在尝试使用 jquery 和 html 制作动态表。基本上它的作用是，从输入的文本中添加一个新行，其中包含文本 n 一个单元格和另一个单元格中的删除按钮。但我的问题是输入的点击事件没有触发。这是添加和删除行的脚本

//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("");
});

根据我在网络检查器上的发现，输入的标签显示如下<input type="button" class="remove-row" value="x">。这与删除行事件不起作用有关吗？

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

4

2 回答 2

0

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

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

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

于 2013-05-13T22:34:23.833 回答
0

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

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

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

于 2013-05-13T22:34:33.123 回答