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”的输入字段。

问题是这个新添加的字段与我写的keypress事件无关。我假设这是因为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);
    })
})

Example of that

Answer 2

使用.live()：

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

});

Answer 3

改为使用.live()或.delegate()。

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

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

Answer 4

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

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

来自文档：

<小时/>

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

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

然后添加一个新元素：

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

然后点击新元素也会触发处理程序。

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

4 个答案: