Le clic jQuery ne fonctionne pas pour les éléments créés dynamiquement

Question

J'ai un morceau de jQuery qui boucle sur chaque élément d'une div( donnée. #container ) et génère une alerte javascript chaque fois qu'un span est cliqué. Cela fonctionne bien si le <span> sont statiques.

Cependant, si j'utilise un morceau de code comme :

$(someLink).click(function(){
   $("#container").html( <new html with new spans> )
});

Le code jQuery ne se déclenche pas. Bizarrement, pourtant

Ma question est la suivante : Y a-t-il une raison pour laquelle mes événements Click ne fonctionnent pas pour les éléments créés dynamiquement ? Je suppose que je devrai ajouter quelque chose dans mon document ready ou heartbeat-script (qui est déclenché toutes les 100 milisecondes) pour accrocher les événements ?

Answer 1

Faites-le :

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

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

Ainsi, vous avez une enveloppe qui est codée en dur dans le code source HTML :

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

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

---

Btw, je recommande Backbone.js - il donne une structure à ce processus :

var YourThing = Backbone.View.extend({

    // the static wrapper (the root for event delegation)
    el: $( '#wrapper' ),

    // event bindings are defined here 
    events: {
        'click a': 'anchorClicked'
    },

    // your DOM event handlers
    anchorClicked: function () {
        // handle click event 
    }

});

new YourThing; // initializing your thing

Answer 2

Source : ce poste

si vous avez créé vos éléments dynamiquement (en utilisant javascript), alors ce code ne fonctionne pas. Parce que, .click() attachera des événements aux éléments qui existent déjà. Comme vous créez vos éléments dynamiquement en utilisant javascript, cela ne fonctionne pas.

Pour cela, vous devez utiliser d'autres fonctions qui fonctionnent sur des éléments créés dynamiquement. Cela peut être fait de différentes manières.

Plus tôt, nous avons . en direct () fonction

$('selector').live('click', function()
{
//your code
});

mais .live() est déprécié et peut être remplacé par d'autres fonctions.

Délégué () :

Utilisation de délégué (), vous pouvez cliquer sur des éléments HTML générés dynamiquement.

Exemple :

$(document).delegate('selector', 'click', function()
{
 //your code
});

EDIT : La méthode delegate() a été dépréciée dans la version 3.0. Utilisez la méthode on() à la place.

ON() :

Utilisation de sur (), vous pouvez cliquer sur des éléments HTML générés dynamiquement.

Exemple :

$(document).on('click', 'selector', function()
{
// your code
});

Answer 3

Essayez quelque chose comme

$("#container").on('click', 'someLinkSelector', function(){ $("#container").html( <new html with new spans> ) });

Vous devez essentiellement attacher vos événements à une partie non dynamique du DOM afin qu'il puisse surveiller les éléments créés dynamiquement.

Answer 4

$("#container").delegate("span", "click", function (){
    alert(11);
});

Answer 5

Utilisation de .click n'attachera des événements qu'à des éléments qui existent déjà.

Vous devez utiliser une fonction qui surveille les événements créés dynamiquement. Dans les anciennes versions de JQuery, cette fonction était la suivante .live() mais elle a été remplacée par .on()