在動態創建的字段上捕獲javascript事件

Question

我有一個名爲「form_inputext1」的類的輸入字段。

當按下回車鍵，使用此代碼我在做一些動作：

jQuery(".form_inputext1").keypress(function(event) { 
     console.log(event.keyCode); 
     if (event.keyCode == '13' || event.which == '13') { 
     event.preventDefault(); 

     jQuery("#addMoreOptions").click(); 

     return false; 
     } 
    }); 

這部分工作正常。它所做的一件事情是，由於ajax調用，它增加了一個類「form_inputext1」的輸入字段。

問題是這個新添加的字段與我寫的按鍵事件沒有關聯。我認爲這是因爲jQuery代碼僅將事件附加到現有字段，而不是將來添加的字段。

我該如何解決這個問題？我希望此功能適用於onkeypress，即使對於不在DOM中的輸入也是如此。

Answer 1

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

Example of that

Answer 2

使用.live()：

$('.form_inputext1').live('keypress', function (event) { 

}); 

Answer 3

改爲使用.live()或.delegate()。

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

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

Answer 4

如果使用jQuery的活法事件綁定到一個類時，它將應用甚至被添加到DOM調用現場方法之後的元素。

文檔：http://api.jquery.com/live/

從文檔：

---

使用這種方法綁定一個click處理目標元素：

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

再後來添加新元素：

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

然後點擊新元素也會觸發處理程序。