Question

我有一张桌子

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

在输入框上按下

时，会添加一个新行

$('[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);
    }
});

它适用于第1行。但是，未检测到动态添加的newRow上的任何事件。

如何解决这个问题？

Answer 1

您可以将事件附加到页面上存在的父元素。详细了解event delegation。

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

 });

Answer 2

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

$('#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

您只需在on()中使用live()更改jQuery<=1.7，就像这样：

$(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

与目前提供的方法不同的另一种方法是将错误处理程序附加到keypress处理程序中新创建的元素...

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

5 个答案: