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

Catch javascript event on fields created dynamically

本文关键字：javascript 事件 字段 动态 创建      更新时间：2023-09-26

我有一个类命名为"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;
      }
    });

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

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

我该如何解决这个问题?我希望这个函数适用于onkeypress，即使输入还不在DOM中。

你可以使用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);
    })
})

用.live()或.delegate()代替。

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

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

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

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

来自文档:

<人力资源 />

使用以下方法将点击处理程序绑定到目标元素:

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

然后再添加一个新元素:

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

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

使用.live(): 

$('.form_inputext1').live('keypress', function ( event ) {
});
相关文章：