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

JavaScript generated elements not functioning - jQuery

本文关键字：不起作用 -jQuery 元素 JavaScript      更新时间：2023-09-26

我有一个如下表；

<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添加的行像其他行一样工作？

这是小提琴。

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

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

我认为这在很大程度上取决于您如何处理功能。您可以使用$.on()或其他侦听器，但如果您知道何时添加元素，并且它完全在您的控制之下，我认为没有必要。

例如：

EDIT-修正了在行上有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/

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

试试这个：

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

通过这样做，您可以在表本身上建立一个处理程序，用于侦听从包含的元素中冒出的事件。第二个参数是一个选择器，实际目标元素将根据该选择器进行测试。如果它匹配（在本例中，如果它是一个"移除"按钮），则调用处理程序函数。

因此，您可以添加任意多的行，每个新按钮的事件都将被同一个处理程序截获。

您的点击处理程序只能处理现有的行，因为当您调用它时它们确实存在。对于不在DOM中的未来元素，尽管您需要使用一个同时考虑当前和未来元素的委托方法。要做到这一点，请使用委托给表（或永远存在的元素）的on（），并添加按钮类作为选择器

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

您可以使用

.live(event, handler)

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

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

但是，从jQuery 1.7开始，live（）已被弃用，请使用on（）

相关文章：