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

Question

La fonction click de jQuery fonctionne bien ici

<div id="LangTable"><a class="deletelanguage">delete</a></div>    

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

mais si je définis quelques <a> par ajax, $('.deletelanguage').click ne fonctionne pas.

par exemple

function CreateRow(jdata) { 
    $('#LangTable').append('<a class="deletelanguage">delete</a>');
}

$.ajax({        
    url: "/jobseeker/profile/",
    success: CreateRow
});

Aujourd'hui, le $('.deletelanguage').click pour la dernière <a> ne fonctionne pas.

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

Note : le CSS fonctionne bien ici.

Je veux faire de ces nouvelles annexes des <a> travailler avec jQuery click.

Answer 1

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 on si vous câblez des éléments futurs

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

Answer 2

Lorsque vous utilisez $('.deletelanguage').click() pour enregistrer un gestionnaire d'événement, il ajoute le gestionnaire aux seuls éléments qui existent dans le dom au moment de l'exécution du code.

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

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

Answer 3

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

ou

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

Answer 4

Comme la classe est ajoutée dynamiquement, vous devez utiliser la fonction délégation d'événements pour enregistrer le gestionnaire d'événement :

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

Cela permettra d'attacher votre événement à toutes les ancres de la zone #LangTable élément, en réduisant la portée de la vérification de l'ensemble de la document et d'accroître l'efficacité.

DEMO FIDDLE

Answer 5

Voici le FIDDLE

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

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