jQuery检测动态添加元素的事件

Question

我有桌子

<table id="table1">
   <tbody>
   <tr>
     <td></td>
     <td><input type="text" /></td>
  </tr>
  </tbody>
</table>

在输入框上按Enter键时，将添加新行

$('[type=text]').on('keyup', function(e){
    if(e.keyCode == 13){
        var newRow = '<tr><td></td><td><input type="text" /></td></tr>';
        $('#table1 tbody tr').last().after(newRow);
    }
});

它在第一行工作正常。 但是，未检测到动态添加的newRow上的任何事件。

如何解决？

Answer 1

您可以将事件附加到页面上存在的父元素。 阅读有关事件委托的更多信息。

$('#table1').on('keyup', '[type=text]', function(e){

 });

Answer 2

您可以将处理程序附加到DOM上方的元素上，然后对其进行过滤。 查看文档以获取所有信息。 但是在您的情况下，这应该可以工作：

$('#table1').on('keyup', '[type="text"]', function(e) {
    // your code
});

每当将事件附加到父元素时，请确保选择尽可能低的元素。 附加到document通常是一个坏主意，因为你会得到一个性能损失（因为处理程序将被解雇随时随地一键被击中，不显山露水的DOM元素您选择...）。

Answer 3

您无法在不存在的元素上设置点击处理程序。 您应该使用event delegation 。 尝试这个：

$("#table1").on('keyup','[type=text]', function(e){
    if(e.keyCode == 13){
        var newRow = '<tr><td></td><td><input type="text" /></td></tr>';
        $('#table1 tbody tr').last().after(newRow);
    }
});

DEMO

Answer 4

您只需在jQuery<=1.7中用live()更改on() ，如下所示：

$(selector).live( eventName, function(){} );

这是：

$('[type=text]').live('keyup', function(e){
    if(e.keyCode == 13){
        var newRow = '<tr><td></td><td><input type="text" /></td></tr>';
        $('#table1 tbody tr').last().after(newRow);
    }
});

或者，在jQuery>1.7 ，更好地使用：

$(staticAncestors).on(eventName, dynamicChild, function() {});

所以：

 $('#table1').on('keyup', '[type=text]', function(e){
        if(e.keyCode == 13){
            var newRow = '<tr><td></td><td><input type="text" /></td></tr>';
        $('#table1 tbody tr').last().after(newRow);
    }
 });

希望它有用！

Answer 5

与到目前为止介绍的方法不同的另一种方法是将错误处理程序附加到按键处理程序中新创建的元素上。