L’événement de clic ne fonctionne pas sur les éléments générés dynamicment

    $(document).ready(function() { $("button").click(function() { $("h2").html("

click me

") }); $(".test").click(function(){ alert(); }); });

J’essayais de générer une nouvelle balise avec le test nom de classe dans le

en cliquant sur le bouton. J’ai également défini un événement de clic associé à un test . Mais l’événement ne fonctionne pas.

Quelqu’un peut-il aider?

    La liaison click() que vous utilisez est appelée une liaison “directe” qui associe uniquement le gestionnaire aux éléments existants . Il ne sera pas lié aux éléments créés dans le futur. Pour ce faire, vous devrez créer une liaison “déléguée” en utilisant on() .

    Les événements delegates ont l’avantage de pouvoir traiter des événements à partir d’éléments descendants ajoutés ultérieurement au document.

    La source

    Voici ce que vous recherchez:

     var counter = 0; $("button").click(function() { $("h2").append("

    click me " + (++counter) + "

    ") }); // With on(): $("h2").on("click", "p.test", function(){ alert($(this).text()); });
      

    Utilisez la méthode .on() avec les événements delegates

     $('#staticParent').on('click', '.dynamicElement', function() { // Do something on an existent or future .dynamicElement }); 

    La méthode .on() vous permet de déléguer n’importe quel gestionnaire d’événement souhaité à:
    éléments actuels ou futurs ajoutés ultérieurement au DOM.

    PS: N’utilisez pas .live() ! A partir de jQuery 1.7+, la méthode .live() est obsolète.

    Raison:

    Dans jQuery, Click () – attache le gestionnaire d’événements uniquement si l’élément existe déjà dans le code HTML.

    Il ne tiendra pas compte du nouvel élément créé dynamicment (élément Future) après le chargement de la page.

    Les éléments dynamics sont créés à l’aide de JavaScript ou de jquery (pas en HTML) .

    Ainsi, l’événement de clic ne se déclenche pas.

    Solution :

    Pour surmonter cela, nous devrions utiliser la fonction on () .

    Les fonctions delegate (), live () et on () présentent des avantages par rapport aux éléments DOM.

    on peut déclencher à la fois des éléments existants et futurs.

    on peut considérer les éléments qui sont tous présents dans toute la page.

    delegate (), les fonctions live () sont obsolètes (ne les utilisez pas).

    Vous devez utiliser la fonction on pour déclencher l’événement sur des éléments (futurs) créés dynamicment.

    Supprimez le code de $ (document) .ready:

     $(".test").click(function(){ alert(); }); 

    Changer en:

     $(document).on('click','.test',function(){ alert('Clicked'); }); 

    Changement

      $(".test").click(function(){ 

    À

      $(".test").live('click', function(){ 

    DÉMO EN DIRECT

    jQuery .live()

    Vous devez utiliser .live pour que cela fonctionne:

     $(".test").live("click", function(){ alert(); }); 

    ou si vous utilisez jquery 1.7+ use .on :

     $(".test").on("click", "p", function(){ alert(); }); 

    Ajoutez cette fonction dans votre fichier js. Cela fonctionnera sur tous les navigateurs

     $(function() { $(document).on("click", '#mydiv', function() { alert("You have just clicked on "); }); }); 
      
    Div

    Essayez .live() ou .delegate()

    http://api.jquery.com/live/

    http://api.jquery.com/delegate/

    Votre élément .test été ajouté après la méthode .click() , de sorte que l’événement ne lui était pas associé. Live et Delegate donnent cet événement déclencheur aux éléments parents qui vérifient leurs enfants, donc tout ce qui est ajouté après fonctionne toujours. Je pense que Live vérifiera l’intégralité du corps du document, tandis que Delegate peut être atsortingbué à un élément, de sorte que Delegate est plus efficace.

    Plus d’informations:

    http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

    J’ai trouvé deux solutions dans la documentation de jQuery:

    Premièrement: utilisez un délégué sur le corps ou le document

    Par exemple:

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

    Pourquoi?

    Réponse: associez un gestionnaire à un ou plusieurs événements pour tous les éléments correspondant au sélecteur, présent ou futur, en fonction d’un ensemble spécifique d’éléments racine. lien: http://api.jquery.com/delegate/

    Deuxièmement: placez votre fonction sur “$ (document)” , en utilisant “on” et attachez-la à l’élément que vous souhaitez déclencher. Le premier paramètre est le “gestionnaire d’événement”, le second: l’élément et le troisième: la fonction. Par exemple:

      $( document ).on( 'click', '.test', function () { ... alert('test'); }); 

    Pourquoi?

    Réponse: Les gestionnaires d’événements sont liés uniquement aux éléments actuellement sélectionnés. ils doivent exister sur la page au moment où votre code appelle .on () . Pour vous assurer que les éléments sont présents et peuvent être sélectionnés, effectuez une liaison d’événements dans un gestionnaire de document prêt pour les éléments qui se trouvent dans le balisage HTML de la page. Si un nouveau code HTML est injecté dans la page, sélectionnez les éléments et joignez les gestionnaires d’événements une fois le nouveau code HTML placé dans la page. Ou utilisez des événements delegates pour attacher un gestionnaire d’événement, comme décrit ci-après … lien: https://api.jquery.com/on/

    Meilleure façon d’appliquer un événement au contenu généré dynamicment en utilisant la délégation.

     $(document).on("eventname","selector",function(){ // code goes here }); 

    donc votre code est comme ça maintenant

     $(document).on("click",".test",function(){ // code goes here }); 
     $(.surrounding_div_class).on( 'click', '.test', function () { alert( 'WORKS!' ); }); 

    Ne fonctionnera que si le DIV avec la classe .surrounding_div_class est le parent immédiat de l’object .test

    S’il y a un autre object dans le div qui sera rempli, cela ne fonctionnera pas.

    Le problème que vous avez est que vous essayez de lier la classe “test” à l’événement avant qu’il y ait quelque chose avec une classe “test” dans le DOM . Bien que cela puisse sembler dynamic, JQuery effectue un passage sur le DOM et déclenche l’événement click lorsque la fonction ready() déclenche, ce qui se produit avant que vous ne créiez le “Click Me” dans votre événement de bouton. .

    En ajoutant l’événement Click “test” au gestionnaire de clic “bouton”, il le connectera après que l’élément correct existe dans le DOM .

      

    Utiliser live() (comme d’autres l’ont fait remarquer) est une autre façon de faire cela, mais je pensais que c’était aussi une bonne idée de signaler l’erreur mineure dans votre code JS. Ce que vous avez écrit n’était pas faux, il fallait juste le définir correctement. Comprendre le fonctionnement des systèmes DOM et JS est l’une des tâches les plus délicates pour de nombreux développeurs traditionnels.

    live() est une manière plus propre de gérer cela et dans la plupart des cas, c’est la bonne façon de faire. Il s’agit essentiellement de regarder le DOM et de re-câbler les choses chaque fois que les éléments qu’il contient changent.

    La fonction .live fonctionne très bien.

    C’est pour les éléments ajoutés dynamicment à la scène.

     $('#selectAllAssetTypes').live('click', function(event){ alert("BUTTON CLICKED"); $('.assetTypeCheckBox').attr('checked', true); }); 

    Vive Ankit.

    Le Jquery .on fonctionne bien mais j’ai eu quelques problèmes avec le rendu implémentant certaines des solutions ci-dessus. Mon problème avec le .on est que d’une manière ou d’une autre il rendait les événements différemment de la méthode .hover .

    Juste pour tout le monde qui peut aussi avoir le problème. J’ai résolu mon problème en ré-enregistrant l’événement de survol pour l’élément ajouté dynamicment:

    réinscrivez l’événement hover car hover ne fonctionne pas pour les éléments créés dynamicment. donc chaque fois que je crée le nouvel élément / dynamic, j’ajoute le code de survol. fonctionne parfaitement

     $('#someID div:last').hover( function() { //... }, function() { //... } ); 

    Je ne pouvais pas vivre ou déléguer pour travailler sur un div dans une lightbox (tinybox).

    J’ai utilisé setTimeout avec succès, de la manière simple suivante:

     $('#displayContact').click(function() { TINY.box.show({html:'
    Submit
    ', close:true}); setTimeout(setContactClick, 1000); }) function setContactClick() { $('#contactSubmit').click(function() { alert($('#contactText').val()); }) }

    Vous pouvez aussi utiliser onclick="do_something(this)" dans l’élément

    Une alternative alternative et plus succincte (IMHO) consiste à utiliser une fonction javascript brute qui répond à un événement on click, puis à renvoyer l’élément target à jQuery si vous le souhaitez. L’avantage de cette approche est que vous pouvez append votre élément de manière dynamic n’importe où, et que le gestionnaire de clics fonctionnera simplement, et vous n’avez pas à vous soucier de déléguer le contrôle aux éléments parents, etc.

    Étape 1: Mettez à jour le code HTML dynamic pour déclencher un événement onclick. Assurez-vous de passer l’object ‘event’ en argument

    
         $ ("bouton"). cliquez sur (fonction () {
             $ ("h2"). html ("

    onclick = 'test (event)' > cliquez sur moi ") })

    Étape 2: Créez la fonction de test pour répondre à l’événement de clic

    
         test de fonction (e) {
             alerte();
         })
    
    

    Etape facultative 3: Etant donné que vous utilisez jQuery, je suppose qu’il sera utile d’obtenir une référence au bouton source.

    
         test de fonction (e) {
             alerte();
    
             // Obtenir une référence au bouton
             // Une explication de cette ligne est disponible ici
             var target = (e.target)?  e.target: e.srcElement;
    
             // Passer la référence du bouton à jQuery pour faire de la magie jQuery
             var $ btn = $ (cible);
    
         })
    
    

    Je travaille avec des tables en leur ajoutant dynamicment de nouveaux éléments, et lorsque vous utilisez on (), le seul moyen de le faire fonctionner est d’utiliser un parent non dynamic comme:

      // Dynamically created  // Dynamically created  // Dynamically created 

    Ceci est vraiment utile car, pour supprimer les événements liés à on () , vous pouvez utiliser off () , et utiliser les événements une fois, vous pouvez en utiliser un () .

    Vous pouvez append un clic à des éléments créés dynamicment. Exemple ci-dessous. Utiliser un quand pour vous assurer que c’est fait. Dans mon exemple, je saisis un div avec la classe expand, en ajoutant un “click to see more” span, puis en utilisant cet intervalle pour masquer / afficher le div original.

     $.when($(".expand").before("Click to see more")).then(function(){ $(".clickActivate").click(function(){ $(this).next().toggle(); }) }); 

    Si vous avez un lien ajouté dinamically à un conteneur ou au corps:

     var newLink= $("", { "id": "approve-ctrl", "href": "#approve", "class": "status-ctrl", "data-atsortingbutes": "DATA" }).html("Its ok").appendTo(document.body); 

    vous pouvez prendre son élément javascript brut et y append un écouteur d’événement, tel que le clic :

     newLink.get(0).addEventListener("click", doActionFunction); 

    Peu importe le nombre de fois que vous ajoutez cette nouvelle instance de lien, vous pouvez l’utiliser comme si vous utilisiez une fonction de click jquery.

     function doActionFunction(e) { e.preventDefault(); e.stopPropagation(); alert($(this).html()); } 

    Donc, vous recevrez un message disant

    C’est bon

    Il a de meilleures performances que les autres alternatives.

    Extra : Vous pourriez obtenir de meilleures performances en évitant les jquery et en utilisant le javascript. Si vous utilisez IE jusqu’à la version 8, vous devez utiliser ce polyfill pour utiliser la méthode addEventListener

     if (typeof Element.prototype.addEventListener === 'undefined') { Element.prototype.addEventListener = function (e, callback) { e = 'on' + e; return this.attachEvent(e, callback); }; } 

    Utilisez ‘on’ car click se lie aux éléments déjà présents.

    Par exemple

     $('test').on('click',function(){ alert('Test'); }) 

    CA aidera.