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

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提供了正确的解决方法，但是这里没有按预期工作的原因可以在这里找到。

Jquery仅适用于加载时存在的元素。 如果您需要对所创建的元素进行操作，则需要按照常见问题解答中的说明进行进一步操作。

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链变得太长时，它们变得难以阅读。