Jquery .keypress sur une entrée ajoutée dynamiquement

Question

J'ajoute actuellement une entrée via un événement .click, puis je souhaite écouter toute pression sur cette entrée. Cependant, l'événement ajouté ne déclenche aucun événement après son insertion (c'est-à-dire flou, pression de touche, mise au point). Est-ce que quelqu'un a des suggestions? Merci d'avance! J'ai également essayé .keyup .keydown, ils ne fonctionnent pas.

Answer 1

Pour capturer blur/focus événements, pourquoi ne pas ajouter le gestionnaire à l'élément créé avant l'ajouter à DOM?

$('#recipientsDiv').click (function() 
{ 
    $('< input type="text" id="toInput" class="inlineBlockElement" style="border:0px none #ffffff; padding:0px; width:20px; overflow:hidden;" />') 
     .keypress (function (e) { ... }) 
     .blur (function (e) { $(this).remove() }) 
     .appendTo ($(this)) 
     .focus() 
    ; 
}); 

Answer 2

Votre gestionnaire keypress est ajouté uniquement aux éléments qui existent lorsque vous l'avez ajouté.

Vous devez appeler la méthode live pour l'ajouter à chaque élément correspondant au sélecteur, peu importe quand il a été ajouté.

Par exemple:

$("input").live('keypress', function(e){ 
    var inputStr = $(this).html(); 
    $("#inputCopier").text(inputStr); 
    var newWidth = $("#inputCopier").innerWidth; 
    $(this).css("width", newWidth); 
}); 

Answer 3

vous pouvez essayer

$("input").live("keypress", function (e) { 
    alert(e.keyChar); 
}); 

Answer 4

En réponse à votre commentaire:

Comme vous avez remarqué, la méthode live ne prend pas en charge l'événement blur.

Pour contourner ce problème, vous pouvez ajouter manuellement le gestionnaire à chaque fois que vous ajoutez un élément, comme celui-ci:

$("#recipientsDiv").click(function(){ 
    $(this).append('< input type="text" id="toInput" class="inlineBlockElement" style="border:0px none #ffffff; padding:0px; width:20px; overflow:hidden;" />') 

    $("#toInput") 
     .focus() 
     .blur(function(){ 
      $("#toInput").remove(); 
     }); 
});