1
votes

Jquery: l'événement Keyup n'est pas déclenché, sur les contrôles d'entrée ajoutés dynamiquement

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

suivant fonctionne très bien sur le contrôle créé statique

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

mais ne se déclenche pas, sur les contrôles créés dynamiquement et rendus comme

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

via un mélange de réponse json ajax et html.

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

});

Qu'est-ce que je fais de mal ici?

javascript jquery

0 commentaires

5 Réponses :

1
votes

Pour un élément créé dynamiquement, utilisez événement délégué :

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

0 commentaires

0
votes

Essayez ce qui suit:

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

0 commentaires

1
votes

Depuis votre

    est un élément dynamique.  Vous devez lier l'événement key up après l'avoir ajouté. Par exemple. 
 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) {

    });
}

0 commentaires

0
votes

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);
});
If you are creating input by any response of request. Maybe you should use general function for keyup. In this way you could use input keyup function.

0 commentaires

0
votes

Pour l'élément ajouté dynamiquement au DOM, vous devez lui lier l'événement en utilisant on()

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

0 commentaires