Jquery show ne fonctionne pas après avoir ajouté un nouvel élément dans le document

Je charge des éléments dans un conteneur div en utilisant Ajax / Request. Par défaut, je cache une boîte de saisie. Si un utilisateur clique sur une icône d'édition sur ce div, je souhaite afficher la zone de saisie. Voici mon code:

CODE HTML

<div class='container'> <input type = 'text' onkeydown='saveFn(event,this)' name = 'editemail' class = 'editemail' style='display:none; height:20px;' /> </div> 

JS CODE

  $(".container").click(function(){ console.log($(this).find(".editemail").show()); //Note it works fine If i didn't load any new elements into the div. }); 

Sortie du journal de la console avant de charger un nouvel élément dans le conteneur.

  <input type="text" onkeydown="saveFn(event,this)" name="editemail" class="editemail" style="height: 20px; " value="[email protected]" title="press enter to save"> 

Sortie du journal de la console après chargement d'un élément dans le conteneur.

 <input type="text" onkeydown="saveFn(event,this)" name="editemail" class="editemail" style="height: 20px; display: none; " value="[email protected]" title="press enter to save"> 

Même si j'ai également essayé de supprimer l'attribut "style" de cet élément et d'ajouter un nouvel élément de style, il ne fonctionne toujours pas.

D'abord, vous devez lire la section FAQ de jQuery Docs: Why_do_my_events_stop_working_after_an_AJAX_request

Utiliser sur () pour déléguer le gestionnaire pour les éléments futurs

 $(document).on('click', ".container", function(){ /* your code*/ }) 

Essayez ceci à la place:

 $(document).on('click','.container',function(){ 

http://api.jquery.com/on/

Essayez-le à la place:

 $('.container').live('click', function(){ /* Your Code Here */ }); 

Le problème est que le click() lié est perdu après une requête ajax. Dans JQuery vous pouvez utiliser la fonction .live() pour fonctionner, mais cette fonction est maintenant obsolète et vous encourage à utiliser .on() ou .delegate() . Personnellement, j'ai des tonnes de headecks à l'aide de .on() et de .delegate() et j'utilise plutôt la livequery . Avec le plugin livequery est aussi simple que:

  $(function(){ $('#elementId').livequery('click',function(){ //do something on click }) }); 

Pour plus d'informations, accédez à: .livequery () .on () .delegate ()