Hay dos métodos en jquery que se pueden usar para vincular objetos DOM agregados automáticamente. Son vivos y delegados. De hecho, estos dos métodos son una variante del método de vinculación. Cuando tratamos con objetos DOM fijos, generalmente usamos Just bind. Es suficiente, pero para los objetos DOM generados dinámicamente por objetos, no hay nada que puedas hacer usando bind. En este momento, viven y delegan, jaja.
El método en vivo se utiliza para vincular un determinado objeto (de un determinado tipo) y vincular métodos a él.
Copie el código de código de la siguiente manera:
//vivir
$("td").live("clic", función () {
alerta($(esto).html());
});
// También es posible lo siguiente$("#list td").live("click", function () {
alerta($(esto).html());
});
El método delegado se utiliza para vincular subobjetos bajo un determinado objeto (cierto tipo) y vincular métodos al subobjeto (delegar el subobjeto para que el subobjeto tenga un método determinado, jaja)
Copie el código de código de la siguiente manera:
$("#list").delegate("td", "clic", función () {
alerta($(esto).html());
});
El código completo de la DEMO a continuación:
Copie el código de código de la siguiente manera:
<html lang="es" xmlns="http://www.w3.org/1999/xhtml">
<cabeza>
<meta juego de caracteres="utf-8" />
<título></título>
<script src="jquery.js" type="text/javascript"></script>
<script id="listTemplate" tipo="texto/html">
<tr>
<td>[ID de usuario]</td>
<td>[ImgUsuario]</td>
<td>[Nombre de usuario]</td>
</tr>
</script>
<tipo de script="texto/javascript">
var reg = new RegExp("//[([^//[//]]*?)//]", 'igm'); //igm se refiere a especificar la coincidencia entre mayúsculas y minúsculas y la coincidencia global, respectivamente. Coincide con varias líneas .
$(función () {
//vivir
$("#list td").live("clic", función () {
alerta($(esto).html());
});
$("#addFun").hacer clic(función () {
var html = document.getElementById("listTemplate").innerHTML;
var fuente = html.replace(reg, function (nodo, clave) { return { 'UserImg': '1', 'UserName': 'zhang', 'UserID': '1' }[clave]; });
$("#lista").append(fuente);
});
});
</script>
</cabeza>
<cuerpo>
<div id="comment_ul_2">
</div>
<tipo de entrada="botón" id="addFun" valor="haz clic en mí" />
<id de tabla="lista">
<tcuerpo>
</tbody>
</tabla>
</cuerpo>
</html>