jQuery不綁定到新創建的 <input> 元件

Question

這就是我所擁有的：

<script language="javascript">
$('#click').one('click', function () {
   var html = '<input type="text" class="input-mini" id="new-input" />';
   $(this).parent().append(html);
});
$('#new-input').on('keyup', function (e) {
   alert('A key was pressed');
   if (e.keyCode == 13) {
      alert('Enter key pressed');
   }
});
</script>

在其他SO答案的推薦下，我發現我應該使用on()綁定動態創建的元素。 我想發生的是在用戶按下ID為new-input的<input>內的Enter鍵后發生AJAX調用。 但是，根本沒有按下任何鍵。

為了將keyup方法綁定到新添加的<input>元素，我需要做什么？

謝謝

Answer 1

閱讀文檔

.on()並不總是綁定動態創建的元素。 僅當您通過選擇器以偵聽以下內容時，它才會這樣做：

$('some container').on('click', '.new-input', function() { ... });

此外，ID必須唯一。 您應該使用類。

Answer 2

創建keyup綁定時，dom上將沒有匹配的元素-嘗試將第二個綁定移到回調中的第一個綁定中：

<script language="javascript">
    $('#click').one('click', function () {
       var html = $('<input type="text" class="input-mini" />');

       html.on('keyup', function (e) {
           alert('A key was pressed');
           if (e.keyCode == 13) {
               alert('Enter key pressed');
           }
        });

       $(this).parent().append(html);
    });
</script>

Answer 3

jsFiddle鏈接： http : //jsfiddle.net/qTd9c/

$('#click').one('click', function () {
    var html = '<input type="text" class="input-mini" id="new-input" />';
    $(this).parent().append(html);

    $('#new-input').on('keyup', function (e) {
        alert('A key was pressed');
        if (e.keyCode == 13) {
            alert('Enter key pressed');
        }
    });

});