Jquery:在动态添加的输入控件上不触发Keyup事件

nr9pn0ug  于 2023-06-22  发布在  jQuery
关注(0)|答案(5)|浏览(231)

以下内容

$('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);
});

我做错了什么?

f4t66c6m

f4t66c6m1#

对于动态创建的元素,使用delegated event

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

58wvjzkj2#

因为<div class='form-group'><input type='text' class='form-control' id='" + item.id + "' name='textBox'></div>是一个动态元素。
您需要在追加keyup事件后绑定它。举个例子。

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) {

    });
}

或者你可以通过引用你的 Package 器元素来绑定你的keyup事件作为委托。#fields在你的情况下。因此,代码可能如下所示:

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

});
rdlzhqv9

rdlzhqv93#

尝试以下操作:

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

xkftehaa4#

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);
});

如果您正在通过任何请求响应创建输入。也许你应该使用通用功能的keyup。这样你就可以使用输入键功能了。

wixjitnu

wixjitnu5#

对于动态添加到DOM的元素,需要使用on()将事件绑定到它们

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

相关问题