如何解決這個簡單的jQuery問題？

我是新來的jQuery和JavaScript的一般。我注意到如果你通過jQuery插入一個元素到DOM中，並且嘗試在那個元素上執行一個動作，它會失敗。例如：如何解決這個簡單的jQuery問題？

我增加了類「listenToField」的頁面上的所有投入要素：

$(function() { 

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

});

然後，當我添加第二個功能：

$(function() { 

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

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

      alert('Hi There') 

    }); 

});

它不提醒'你好'。

但是，如果我將類「listenToField」硬編碼到HTML輸入中，則警報有效。如何在jQuery無需使用硬編碼的情況下動態插入類時如何工作？

來源

2011-05-12 George

試試jQuery的live方法。

live()方法將事件分配給存在的元素以及將要創建的元素。

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

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

來源

2011-05-12 01:15:42

太好了，但解釋了原因。 – 2011-05-12 01:17:21

雖然他並沒有創造新的元素，但他只是在應用一個班級，然後嘗試按班級進行選擇。你不同意跳過類應用程序部分更有意義嗎？我想可能還有另一個原因，但這個問題並不明顯。 – 2011-05-12 01:17:29

真棒，謝謝！ – George 2011-05-12 01:18:39

就繞過了中間商：

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

你所申請的類反正所有的輸入，所以只是附加keydown事件來代替。如果您還需要CSS樣式，您仍然可以應用該類。

來源

2011-05-12 01:12:20

我簡化了它的例子。實際上，我將這個類添加到輸入的表單驗證失敗的字段中。除了「listToField」類之外，它還爲所有這些輸入添加了紅色邊框。因此，稍後當用戶開始填寫缺失的信息時，我將刪除邊框。無論如何，我只是想知道解決方案，因爲我確信它會在其他項目中彈出。 – George 2011-05-12 01:16:38

當然。查看ChrisW添加的信息。它應該可以幫助你正常工作。 – 2011-05-12 01:21:00

@ jesus.tesh提供了一個正確的解決辦法，但像您期望可以發現here的原因，這是行不通的。

Jquery只適用於加載時存在的元素。如果您需要對付您創建的元素，則需要按常見問題中的解釋進行進一步操作。

來源

2011-05-12 01:16:14 ChrisW

好的信息，謝謝你添加它。回答這個問題很好，但教得更好。 +1爲你 – 2011-05-12 01:19:56

感謝您的鏈接，該FAQ頁面是超級有用的。 – George 2011-05-12 01:30:13

另一種想法，爲什麼採取兩個步驟？ jQuery是可鏈接的。 jQuery函數的返回值是jQuery對象。

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

不要太過分了。當jQuery鏈變得太長時，它們變得難以閱讀。

來源

2011-05-12 01:30:58

如何解決這個簡單的jQuery問題？

回答

相關問題