La fonction de clic jQuery ne fonctionne pas après un appel ajax?

La fonction de clic jQuery fonctionne bien ici

 $('.deletelanguage').click(function(){ alert("success"); }); 

mais si j’ai défini certains par ajax, $('.deletelanguage').click ne fonctionne pas.

par exemple

 function CreateRow(jdata) { $('#LangTable').append('delete'); } $.ajax({ url: "/jobseeker/profile/", success: CreateRow }); 

Maintenant, le $('.deletelanguage').click pour le dernier ne fonctionne pas.

exemple jsfiddle: http://jsfiddle.net/suhailvs/wjqjq/

Note: le CSS fonctionne bien ici.

Je veux que ces nouveaux ajouts fonctionnent avec le clic jQuery.

Le problème est que .click ne fonctionne que pour les éléments déjà présents sur la page. Vous devez utiliser quelque chose comme si vous connectez des éléments futurs

 $("#LangTable").on("click",".deletelanguage", function(){ alert("success"); }); 

Lorsque vous utilisez $('.deletelanguage').click() pour enregistrer un gestionnaire d’événement, il ajoute le gestionnaire uniquement aux éléments existant dans le dom lorsque le code a été exécuté

vous devez utiliser des gestionnaires d’événements basés sur la délégation ici

 $(document).on('click', '.deletelanguage', function(){ alert("success"); }); 
 $('body').delegate('.deletelanguage','click',function(){ alert("success"); }); 

ou

 $('body').on('click','.deletelanguage',function(){ alert("success"); }); 

Comme la classe est ajoutée dynamicment, vous devez utiliser la délégation d’événement pour enregistrer le gestionnaire d’événements comme:

 $('#LangTable').on('click', '.deletelanguage', function(event) { event.preventDefault(); alert("success"); }); 

Cela attachera votre événement à toutes les ancres de l’élément #LangTable , ce qui #LangTable la #LangTable de vérifier l’arborescence complète document éléments de document et d’accroître l’efficacité.

DEMO DE FIDDLE

Voici le FIDDLE

Même code que le vôtre mais il fonctionnera sur les éléments créés dynamicment.

 $(document).on('click', '.deletelanguage', function () { alert("success"); $('#LangTable').append(' 
------------
Now my class is deletelanguage. click me to test it is not working.'); });

L’événement click n’existe pas au point où l’événement est défini. Vous pouvez utiliser en direct ou déléguer l’événement.

 $('.deletelanguage').live('click',function(){ alert("success"); $('#LangTable').append(' 
------------
Now my class is deletelanguage. click me to test it is not working.'); });

J’ai testé une solution simple qui fonctionne pour moi! Mon javascript était dans un fichier js séparé. Ce que j’ai fait, c’est que j’ai placé le javascript pour le nouvel élément dans le code HTML chargé avec ajax, et cela fonctionne très bien pour moi! C’est pour ceux qui ont de gros fichiers de javascript !!