Vous pouvez utiliser les 2 méthodes suivantes jQuery fournit:
Le premier, est la méthode .live(), et l'autre est la méthode .delegate().
L'utilisation du premier est très simple:
$(document).ready(function() {
$("#dynamicElement").live("click", function() {
//do something
});
}
Comme vous pouvez le voir, le premier argument est l'événement que vous voulez lier, et la seconde est une fonction qui gère l'événement. La façon dont cela fonctionne n'est pas exactement comme un "re-rendu". Le moyen commun de le faire ($("#dynamicElement").click(...) ou $("#dynamicElement").bind("click", ...)) fonctionne en attachant le gestionnaire d'événements d'un événement déterminé à l'élément DOM lorsque le DOM a correctement chargé ($(document).ready(...)). Maintenant, évidemment, cela ne fonctionnera pas avec les éléments générés dynamiquement, car ils ne sont pas présents lors du premier chargement du DOM.
Le .live() la manière dont fonctionne est, au lieu d'attacher le gestionnaire d'évent à l'élément DOM lui-même, il l'attache avec l'élément document, en profitant de la propriété bouillonnement de JS & DOM (Lorsque vous cliquez sur élément généré dynamiquement et aucun gestionnaire d'événements n'est attaché, il continue de chercher en haut jusqu'à ce qu'il en trouve un).
Cela semble très bien, non? Mais il y a un petit problème technique avec cette méthode, comme je l'ai dit, il attache le gestionnaire d'événements au sommet du DOM, donc quand vous cliquez sur l'élément, votre navigateur doit traverser tout l'arbre DOM, jusqu'à ce qu'il trouve l'événement approprié gestionnaire. Un processus qui est très inefficace, d'ailleurs. Et voici où apparaît la méthode .delegate().
Supposons que le estructure HTML suivant:
<html>
<head>
...
</head>
<body>
<div id="links-container">
<!-- Here's where the dynamically generated content will be -->
</div>
</body>
</html>
Ainsi, la méthode .delegate(), au lieu de lier le gestionnaire d'événements au sommet du DOM, vous venez pouvez l'attacher à un DOM parent Élément. Un élément DOM, vous êtes sûr qu'il va être quelque part du contenu généré dynamiquement dans l'arborescence DOM. Le plus proche d'eux, le mieux cela va fonctionner. Donc, cela devrait faire la magie:
$(document).ready(function() {
$("#links-container").delegate("#dynamicElement", "click", function() {
//do something
});
}
C'était un peu une longue réponse, mais je tiens à expliquer la théorie derrière haha. Vous devez corriger votre balisage, car: 1) Les ancres n'autorisent pas l'utilisation d'un attribut de valeur, et 2) Vous ne pouvez pas avoir deux balises ou plus ayant le même ID. Essayez ceci:
<a class="removeLineItem" id="delete-1">Delete</a>
<a class="removeLineItem" id="delete-2">Delete</a>
<a class="removeLineItem" id="delete-3">Delete</a>
Et pour déterminer lequel des points d'ancrage a été cliquée
$(document).ready(function() {
$("#links-container").delegate(".removeLineItem", "click", function() {
var anchorClicked = $(this).attr("id"),
valueClicked = anchorClicked.split("-")[1];
});
}
Avec ce code, vous avez enregistré dans la variable anchorClicked l'identifiant du lien cliqué, et dans le valueClicked le numéro associé à l'ancre.
Lisez les fonctionnalités jQuery "live" et "delegate". – Pointy