捕获动态创建的字段上的 javascript 事件

Question

我有一个名为“form_inputext1”的类的输入字段。

我在按 ENTER 时执行一些操作，使用以下代码：

jQuery(".form_inputext1").keypress(function(event) {
      console.log(event.keyCode);
      if (event.keyCode == '13' || event.which == '13') {
         event.preventDefault();

         jQuery("#addMoreOptions").click();

         return false;
      }
    });

这部分工作正常。它所做的事情之一是，作为 ajax 调用的结果，它添加了一个“form_inputext1”类的输入字段。

问题是这个新添加的字段与我编写的按键事件无关。我认为这是因为 jQuery 代码仅将事件附加到现有字段，而不是附加到将来添加的字段。

我该如何解决这个问题？我希望这个函数适用于 onkeypress，即使对于尚未在 DOM 中的输入也是如此。

Answer 1

您可以使用 Jquery 的 live：

jQuery(".form_inputext1").live('keypress', function(event) {
      console.log(event.keyCode);
      if (event.keyCode == '13' || event.which == '13') {
         event.preventDefault();

         jQuery("#addMoreOptions").click();

         return false;
      }
});

或者您可以在以下情况下添加按键事件 ：创建元素，这将为您提供更好的性能：

$('.clicker').click(function() {
    $('<div class="clicker" />').text('new').appendTo($(this)).keypress(function(event) {
        alert(event.which);
    })
})

示例

Answer 2

请改用 .live() 或 .delegate()。

http://api.jquery.com/live/

http://api.jquery.com/delegate/

Answer 3

如果您使用 jQuery live 方法将事件绑定到类，它甚至会应用于调用 live 方法后添加到 DOM 的元素。

文档： http://api.jquery.com/live/

从文档中：

---

使用此方法将单击处理程序绑定到目标元素：

$('.clickme').live('click', function() {
  // Live handler called.
});

然后添加一个新元素：

$('body').append('Another target');

然后单击新元素也将触发该处理程序。

Answer 4

使用 .live()：

$('.form_inputext1').live('keypress', function ( event ) {

});