Il existe deux méthodes dans jquery qui peuvent être utilisées pour lier des objets DOM ajoutés automatiquement. En fait, ces deux méthodes sont une variante de la méthode bind. Lorsque nous traitons d'objets DOM fixes, nous utilisons généralement Just bind is. C'est suffisant, mais pour les objets DOM générés dynamiquement par des objets, vous ne pouvez rien faire en utilisant bind. À ce stade, live et délégué entrent en jeu, haha.
La méthode live est utilisée pour lier un certain objet (d'un certain type) et y lier des méthodes.
Copiez le code comme suit :
//en direct
$("td").live("clic", fonction () {
alerte($(this).html());
});
//Ce qui suit est également possible$("#list td").live("click", function () {
alerte($(this).html());
});
La méthode déléguée est utilisée pour lier des sous-objets sous un certain objet (certain type) et lier des méthodes au sous-objet (déléguer le sous-objet pour que le sous-objet ait une certaine méthode, haha)
Copiez le code comme suit :
$("#list").delegate("td", "clic", function () {
alerte($(this).html());
});
Le code complété de la DEMO ci-dessous :
Copiez le code comme suit :
<html lang="fr" xmlns="http://www.w3.org/1999/xhtml">
<tête>
<meta charset="utf-8" />
<titre></titre>
<script src="jquery.js" type="text/javascript"></script>
<script id="listTemplate" type="text/html">
<tr>
<td>[ID utilisateur]</td>
<td>[UserImg]</td>
<td>[Nom d'utilisateur]</td>
</tr>
</script>
<script type="text/javascript">
var reg = new RegExp("//[([^//[//]]*?)//]", 'igm'); //igm fait référence à la spécification de la correspondance sensible à la casse et de la correspondance globale, respectivement. Correspond à plusieurs lignes. .
$(fonction () {
//en direct
$("#list td").live("clic", function () {
alerte($(this).html());
});
$("#addFun").click(function () {
var html = document.getElementById("listTemplate").innerHTML;
var source = html.replace(reg, function (node, key) { return { 'UserImg' : '1', 'UserName' : 'zhang', 'UserID' : '1' }[key]; });
$("#list").append(source);
});
});
</script>
</tête>
<corps>
<div id="comment_ul_2">
</div>
<input type="button" id="addFun" value="cliquez sur moi" />
<table id="liste">
<corps>
</tbody>
</table>
</corps>
</html>