Jquery: событие Keyup не запускается при динамически добавляемых элементах управления вводом

#javascript #jquery

#javascript #jquery

Вопрос:

Следующее

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

Что я здесь делаю не так?

Ответ №1:

Для динамически созданного элемента используйте делегированное событие:

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

Ответ №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) {

    });
}
  

Ответ №3:

Попробуйте следующее:

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

Ответ №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);
});
  

Если вы создаете ввод с помощью любого ответа на запрос. Возможно, вам следует использовать общую функцию для keyup. Таким образом, вы могли бы использовать функцию ввода keyup.

Ответ №5:

Для элемента, динамически добавляемого в DOM, вам необходимо привязать событие к ним с помощью on()

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