Existem dois métodos em jquery que podem ser usados para vincular objetos DOM anexados automaticamente. Eles são ativos e delegados. Na verdade, esses dois métodos são uma variante do método de ligação. Ao lidar com objetos DOM fixos, geralmente usamos Just bind is. o suficiente, mas para objetos DOM gerados dinamicamente por objetos, não há nada que você possa fazer usando bind. Neste momento, live e delegado entram em ação, haha.
O método live é usado para vincular um determinado objeto (de um determinado tipo) e vincular métodos a eles.
Copie o código do código da seguinte forma:
//ao vivo
$("td").live("clique", function() {
alerta($(este).html());
});
//O seguinte também é possível$("#list td").live("click", function () {
alerta($(este).html());
});
O método delegado é usado para vincular subobjetos sob um determinado objeto (certo tipo) e vincular métodos ao subobjeto (delegar o subobjeto para que o subobjeto tenha um determinado método, haha)
Copie o código do código da seguinte forma:
$("#lista").delegate("td", "clique", function () {
alerta($(este).html());
});
O código completo da DEMO abaixo:
Copie o código do código da seguinte forma:
<html lang="pt" xmlns="http://www.w3.org/1999/xhtml">
<cabeça>
<meta charset="utf-8" />
<título></título>
<script src="jquery.js" type="text/javascript"></script>
<script id="listTemplate" type="text/html">
<tr>
<td>[ID do usuário]</td>
<td>[UserImg]</td>
<td>[Nome de usuário]</td>
</tr>
</script>
<script type="texto/javascript">
var reg = new RegExp("//[([^//[//]]*?)//]", 'igm' refere-se à especificação de correspondência com distinção entre maiúsculas e minúsculas e correspondência global, respectivamente. Corresponde a várias linhas; .
$(função(){
//ao vivo
$("#lista td").live("clique", function () {
alerta($(este).html());
});
$("#addFun").click(função(){
var html = document.getElementById("listTemplate").innerHTML;
var fonte = html.replace (reg, função (nó, chave) { return { 'UserImg': '1', 'UserName': 'zhang', 'UserID': '1' }[chave]; });
$("#lista").append(fonte);
});
});
</script>
</head>
<corpo>
<div id="comment_ul_2">
</div>
<input type="button" id="addFun" value="clique em mim" />
<table id="lista">
<corpo>
</tbody>
</tabela>
</body>
</html>