Es gibt zwei Methoden in jquery, die zum Binden automatisch angehängter DOM-Objekte verwendet werden können. Diese beiden Methoden sind tatsächlich eine Variante der Bindungsmethode. Beim Umgang mit festen DOM-Objekten verwenden wir normalerweise Just bind Genug, aber für DOM-Objekte, die dynamisch von Objekten generiert werden, gibt es nichts, was man mit bind machen kann. Zu diesem Zeitpunkt kommen Live und Delegate ins Spiel, haha.
Die Live-Methode wird verwendet, um ein bestimmtes Objekt (eines bestimmten Typs) zu binden und Methoden daran zu binden.
Kopieren Sie den Codecode wie folgt:
//live
$("td").live("click", function () {
alarm($(this).html());
});
//Folgendes ist auch möglich$("#list td").live("click", function () {
alarm($(this).html());
});
Die Delegate-Methode wird verwendet, um Unterobjekte unter einem bestimmten (bestimmten Typ) Objekt zu binden und Methoden an das Unterobjekt zu binden (das Unterobjekt zu delegieren, damit das Unterobjekt eine bestimmte Methode hat, haha).
Kopieren Sie den Codecode wie folgt:
$("#list").delegate("td", "click", function () {
alarm($(this).html());
});
Der fertige Code der DEMO unten:
Kopieren Sie den Codecode wie folgt:
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<Kopf>
<meta charset="utf-8" />
<title></title>
<script src="jquery.js" type="text/javascript"></script>
<script id="listTemplate" type="text/html">
<tr>
<td>[Benutzer-ID]</td>
<td>[UserImg]</td>
<td>[Benutzername]</td>
</tr>
</script>
<script type="text/javascript">
var reg = new RegExp("//[([^//[//]]*?)//]", 'igm'); .
$(Funktion () {
//live
$("#list td").live("click", function () {
alarm($(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>
</head>
<Körper>
<div id="comment_ul_2">
</div>
<input type="button" id="addFun" value="click me" />
<table id="list">
<tbody>
</tbody>
</table>
</body>
</html>