如何解決這個簡單的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鏈變得太長時，它們變得難以閱讀。