JavaScript 生成的元素不起作用 - jQuery

Question

我有一个如下表；

<table id="mytable">
    <tr>
        <td>cola1</td>
        <td>cola2</td>
        <td>cola3</td>
        <td class="rem">cola4</td>
    </tr>
    <tr>
        <td>colb1</td>
        <td>colb2</td>
        <td>colb3</td>
        <td class="rem">colb4</td>
    </tr>
</table>

<button id="but">Add Row</button>

一个按钮<button id="but">mybutton</button>放置在表格底部，单击该表格即可向表格添加新行。最后一列行的类别为 rem ，它具有单击时删除父行的功能。

这是 JavaScript

$(document).ready(function() {
    $('#but').click(function() {
        row = $("<tr></tr>");
        col1 = $('<td>colex1</td>');
        col2 = $('<td>colex2</td>');
        col3 = $('<td>colex3</td>');
        col4 = $('<td class="rem">colex4</td>');
        row.append(col1,col2,col3,col4).prependTo("#mytable");
    });

    $('.rem').click(function() {
        var $button = $(this);
        var $row = $button.closest('tr');
        $row.fadeOut('slow');
    });
});

该函数在上面两行中运行良好。但删除按钮在 jQuery 添加的行中不起作用。如何使 Javascript 添加的行像其他行一样工作？

<强> Here 是 fiddle 。

Answer 1

您需要使用委托(delegate)事件处理程序，使用 on() ，如果您希望它应用于新创建的元素。其工作方式是将处理程序添加到已经(并将继续)存在于 DOM 中的元素，然后在处理程序中，当事件冒泡时，它会检查事件目标是否与提供给 on() 的选择器匹配。功能。如果是这样，那么它会运行处理程序，否则不会。

$('#mytable').on('click','.rem',function() {
  var $button = $(this);
  var $row = $button.closest('tr');
  $row.fadeOut('slow');
});