web-dev-qa-db-fra.com

jQuery onclick ne se déclenche pas sur les éléments HTML insérés dynamiquement?

Mon événement onclick fonctionne. Cependant, lorsque cet événement onclick est en HTML dynamique, il ne fonctionne plus. Comme dans: rien ne se passe.

$(document).ready(function () {
    $("#guestlist .viewguestdetails").click(function () {        
        $(".guestdetails[data-id='18']").toggle();
    });
});

J'ajoute ensuite dynamiquement ce HTML à une page:

<div id="guestlist">    
    <span class="completeguestdetails" data-id="18">(add your data)</span>  
        <div class="guestdetails" data-id="18" style="display: none;">
            some data
        </div>
</div>

Cependant, lorsque je clique ensuite sur "(ajouter vos données)", rien ne se passe. Quand j'ai le HTML statiquement dans ma page, ce basculement du div 'guestdetails' fonctionne. Il semble qu'il n'y ait aucun événement attaché au HTML inséré dynamiquement?

MISE À JOUR:

Le nouveau HTML dynamique que j'insère i une ligne dans une table existante. Les autres lignes ont déjà des événements attachés aux événements onclick, comme:

$("span.guestattendance").click(function () {
    if ($(this).hasClass('checkbox-on')) {
        $(this).removeClass('checkbox-on').addClass('checkbox-off');
        $("#guestday").removeClass('checkbox-on').addClass('checkbox-off');
    }
    else {
        $(this).removeClass('checkbox-off').addClass('checkbox-on');            
        if ($("#guestceremony").hasClass('checkbox-on') && $("#guestreception").hasClass('checkbox-on') &&
        $("#guestdiner").hasClass('checkbox-on') && $("#guestparty").hasClass('checkbox-on')) {
            $("#guestday").removeClass('checkbox-off').addClass('checkbox-on');
        }
    }
});

Puisqu'un utilisateur peut insérer plus d'une ligne, je n'ai pas utilisé l'identifiant, mais plutôt ajouté un wrapper autour de l'élément que j'insère:

puis dans la fonction ready ():

$('.newrow_wrapper').on('click', 'span', function () {
    $(".guestdetails[data-id='" + $(this).attr('data-id') + "']").toggle();
});

Cependant, le premier problème est que, apparemment, lorsque j'enveloppe un div autour d'une balise tr, toutes les balises tr et td sont supprimées du HTML inséré! De plus, lorsque je clique sur la plage pour afficher les détails des invités, rien ne se passe.

jquerydocument-ready
15
Flo

Faites ceci:

 $( '#wrapper' ).on( 'click', 'a', function () { ... });

où #wrapper est un élément statique dans lequel vous ajoutez les liens dynamiques.

Donc, vous avez un wrapper qui est codé en dur dans le code source HTML:

<div id="wrapper"></div>

et vous le remplissez de contenu dynamique. L'idée est de déléguer les événements à ce wrapper, au lieu de lier les gestionnaires directement sur les éléments dynamiques.

33
underscore

Utilisez .on () pour attacher des gestionnaires d'événements qui lient dynamiquement les éléments html. Voici le lien pour la documentation http://api.jquery.com/on/

écrire quelque chose comme ça

      $( '#someid' ).on( 'click', function () { ... });

ou quelque chose comme ça.

          $(document).on( 'click', 'tag_name', function () { ... });
13
Gourav

jQuery.on () est utilisé pour lier n'importe quel événement sur des éléments HTML insérés dynamiquement. Utilisez-le comme ceci:

$(document).ready(function () {
    $(document).on('click',"#guestlist .viewguestdetails",function () {        
        $(".guestdetails[data-id='18']").toggle();
    });
});
5
Nishu Tayal