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 是小提琴。

Answer 1

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

on()

Answer 2

我认为很多都归结为你如何处理这些功能。您可以使用$.on()或其他一些听众，但如果您知道何时添加该元素并且完全由您控制，我认为没有必要。

例如：

编辑 - 修复了行上有click处理程序的问题，请将其放在.rem元素上。

$(document).ready(function() {
    var $row = $("<tr>"),
        $col1 = $('<td>colex1</td>'),
        $col2 = $('<td>colex2</td>'),
        $col3 = $('<td>colex3</td>'),
        $col4 = $('<td class="rem">colex4</td>');

    var addrow = function() {
        $row.clone(true).prependTo("#mytable");
    };

    var removerow = function() {
        var $button = $(this),
            $row = $button.closest('tr');

        $row.fadeOut('slow');
    };

    $row.append($col1, $col2, $col3, $col4);
    // This could be $($col4).click(removerow);, too.
    $row.find('.rem').click(removerow);

    $('#but').click(addrow);
    $('.rem').click(removerow);
});

http://jsfiddle.net/sM2R8/4/

现在，它使用$row缓存新removerow来复制已添加的点击处理程序。如果要更改值，则需要克隆然后更新这些值，但这只是您想要如何处理它的细微差别。您也可以在将附加到表中之前/之后将{{1}}处理程序添加到克隆元素中。

Answer 3

试试这个：

$('#mytable').on('click', '.rem', function() {
  var $button =$(this);
  // ...
});

通过这样做，您可以在表本身上建立一个处理程序，用于侦听从包含的元素冒出的事件。第二个参数是一个选择器，对其测试实际的目标元素。如果匹配（在这种情况下，如果它是＆＃34;删除＆＃34;按钮），则调用您的处理函数。

因此，您可以添加任意数量的行，并且每个新按钮的事件将被同一个处理程序拦截。

Answer 4

您可以使用

.live(event, handler)

在这种情况下，事件处理程序也将附加到future元素。所以使用：

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

但是，不推荐使用jQuery 1.7 live（），请使用on（）

Answer 5

您的点击处理程序仅适用于现有行，因为它们在您调用时确实存在。对于未在DOM中的未来元素，您需要使用委托方法来考虑当前和未来元素。为此，使用委托给表的on（）（或者总是存在的元素），并将按钮类添加为选择器

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

JavaScript生成的元素无法运行 - jQuery

5 个答案: