web-dev-qa-db-fra.com

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

La fonction de clic de jQuery fonctionne bien ici

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

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

mais si je règle certains <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
});

Maintenant, la $('.deletelanguage').click pour le dernier <a> ne fonctionne pas.

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

Remarque: le CSS fonctionne bien ici.

Je veux que ces <a> nouvellement ajoutés fonctionnent avec un clic jQuery.

htmlajaxjquerydom
68
suhailvs

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 connectez des éléments futurs

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

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

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

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

ou

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

Comme la classe est ajoutée dynamiquement, vous devez utiliser délégation d'événements pour enregistrer le gestionnaire d'événements de la manière suivante:

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

Cela associera votre événement à tous les points d'ancrage de l'élément #LangTable, ce qui réduira la possibilité de devoir contrôler l'intégralité de l'arborescence des éléments document et augmentera l'efficacité.

FIDDLE DEMO

6
palaѕн

Voici le FIDDLE

Même code que le vôtre mais cela fonctionnera sur des é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>');
});
2
Vond Ritz

L'événement click n'existe pas à l'endroit où il est défini. Vous pouvez utiliser en direct ou déléguer l'événement.

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

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 du nouvel élément dans le code HTML chargé d’ajax, et cela fonctionne très bien pour moi! Ceci est pour ceux qui ont de gros fichiers de javascript !!

1
pollux1er