jQuery：在動態添加的輸入控件上，不會觸發Keyup事件

Question

下列

$('input[type = text]').on('keyup', function (e) {

});

在靜態創建的控件上效果很好

<input id="txtSearch" type="text" class="col-md-12 col-sm-12 col-xs-12 col-lg-12">

但不會針對動態創建並呈現為的控件觸發

<input type="text" class="form-control" id="idName" name="textBox">

通過ajax json響應和html的混合。

jQuery.each(response.controls, function (index, item) {
    var input = jQuery("<div class='form-group'><input type='text' class='form-control' id='" + item.id + "' name='textBox'></div>");
    jQuery('#fields').append(input);
});

我在這里做錯了什么？

Answer 1

對於動態創建的元素，使用委托事件 ：

$('body').on('keyup', 'input[type=text]' function (e) {

Answer 2

由於您的<div class='form-group'><input type='text' class='form-control' id='" + item.id + "' name='textBox'></div>是動態的元件。

附加按鍵后，您需要綁定該按鍵。 例如。

jQuery.each(response.controls, function (index, item) {
    var input = jQuery("<div class='form-group'><input type='text' class='form-control' id='" + item.id + "' name='textBox'></div>");
    jQuery('#fields').append(input);
    inputevent();
});

function inputevent() {
    $('input[type = text]').off('keyup').on('keyup', function (e) {

    });
}

Answer 3

請嘗試以下操作：

jQuery(document).on('keyup','input[type = text]',function(){
    //execute your code, when dynamically added content is keyupped
});

Answer 4

catchKeyup(id) {
    // code here...
}
jQuery.each(response.controls, function (index, item) {
    var input = jQuery("<div class='form-group'><input type='text' class='form-control' id='" + item.id + "' onkeyup='catchKeyup(" + item.id +")' name='textBox'></div>");
    jQuery('#fields').append(input);
});

如果要通過請求的任何響應來創建輸入。 也許您應該使用常規功能進行鍵入。 這樣，您可以使用輸入鍵盤功能。

Answer 5

對於動態添加到DOM的元素，您需要使用on()將事件綁定到它們

$(document).on("keyup",'input[type=text]', function(){
//do your work
});