Question

我是jQuery和JavaScript的新手。我注意到如果你通过jQuery将一个元素插入到DOM中并尝试稍后对该元素执行操作，它就会失败。例如：

我正在为页面上的所有输入元素添加一个“listenToField”类：

$(function() {

$('input').addClass('listenToField');

});

然后当我添加第二个函数时：

$(function() {

     $('input').addClass('listenToField');

     // second function
     $('.listenToField').keydown(function() {

          alert('Hi There')

     });

});

它没有提醒'你好'。

但是，如果我将“listenToField”类硬编码到HTML输入中，则警报会起作用。当jQuery动态插入类而不诉诸硬编码时，我怎么能继续工作呢？

Answer 1

尝试使用jQuery的live方法。

live()方法将事件分配给存在的元素和将要创建的元素。

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

$('.listenToField').live('keydown', function() {
   alert('Hi there!');
})

Answer 2

@ jesus.tesh提供了正确的解决方法，但可以找到{3}无法正常工作的原因{。{3}}。

Jquery仅适用于加载时存在的元素。如果你需要它来对付你创建的元素，你需要按照FAQ中的说明进行进一步的操作。

Answer 3

切断中间人：

(function() {
     $('input').keydown(function() {
          alert('Hi There')
     });
});

无论如何，您正在将该类应用于所有输入，因此只需附加keydown事件即可。如果您还需要CSS样式，您仍然可以应用该类。

Answer 4

另一个想法，为什么要采取两个步骤？ jQuery是可链接的。 jQuery函数的返回值是jQuery对象。

$("input").addClass("listenToField").keydown(function () { alert("Hi There"); });

不要太过分了。当jQuery链变得太长时，它们就变得难以阅读。

如何解决这个简单的jQuery问题？

4 个答案: