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

对于动态创建的元素，请使用delegated event：

$('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

master

如果您通过请求的任何响应创建输入。也许您应该使用常规功能进行键入。这样，您可以使用输入键盘功能。

Answer 5

对于动态添加到DOM的元素，您需要使用on()

将事件绑定到它们

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

jQuery：在动态添加的输入控件上，不会触发Keyup事件

5 个答案: