web-dev-qa-db-fra.com

Gestion des événements de clic pour les éléments ajoutés dans jQuery

J'ai généré quelques éléments dans ma page en utilisant la méthode suivante. Par exemple,

$("#button"+caption).click(function(){
        var firstDisplay = '<div id="firstDisp'+caption+'"><ul>';
        for(var i=0;i<parents.length;i++){
            firstDisplay=firstDisplay+'<li class="fClick">'+parents[i]+'</li>';
        }
        firstDisplay=firstDisplay+'</ul></div>';
        $(firstDisplay).dialog();
});

et quand je crée un événement onclick pour 'fClass' comme ceci:

$(".fClick").click(function(){
    alert("hey!");
});

Ça ne marche pas! Cependant, si je mets la fonction onclick dans l’autre fonction, juste après .dialog (), cela fonctionne! De nombreux éléments ont été créés de cette manière. Je ne peux donc pas mettre tous les événements onclick dans une même méthode. Y a-t-il un moyen de contourner cela? J'ai le même problème avec la méthode .append ainsi.

jqueryonclickappend
21
Eddard Stark

Changez-le en .on ou .delegate en fonction de la version de jQuery que vous utilisez.

À partir de jQuery 1.7+ 

$(document).on('click', '.fClick', function(){ 
    alert("hey!");
});

Pour les anciennes versions de jQuery, utilisez delegate

$(document).delegate('.fClick', 'click', function(){
    alert("hey!");
});
62
Selvakumar Arumugam

Ce que Vega a dit fonctionne parfaitement . Il y a un indice: Je pense que dans la deuxième ligne il y a une erreur . Vous pouvez probablement utiliser la méthode addClass car vous ne pouvez pas mettre id ou class dans le rendu .Voici un exemple:

var content = "<div>Hello, World</div>";
$("div").after(content);
$("last:div").addClass("mydiv");

Et la classe sera ajoutée mais je ne suis pas sûr que vous puissiez ajouter un identifiant.

0
user4710450

Utilisez on au lieu de click:

$(".fClick").on('click',function(){
  alert("hey!");
});

click ajoute des gestionnaires de clic à .fClick qui sont présents lorsque vous appelez $('.fClick').click({...}). Les nouveaux éléments .fClick ajoutés plus tard n'auront pas l'événement click. Mais lorsque vous utilisez on, tous les éléments .fClick auront un gestionnaire de clics, même s'ils sont ajoutés ultérieurement.
Lisez plus ici: http://api.jquery.com/on/

0
Abraham

appelez le $ (document) .ready (fonction () à nouveau et ajoutez votre code ici . Le document est lu à nouveau (actualisé) et vous pouvez simplement appliquer votre code ici.

0
DenniZr