作者TonyQ (自立而後立人。)
看板Ajax
标题Re: [问题] 关於jQuery的html()和apend()
时间Thu Apr 26 15:32:32 2012
※ 引述《sabiya (别赤脚走路)》之铭言：
: 主要运作的流程如下：
: 使用jQuery post callback回来会回传一个完整如前面的<tr>插入table，
: 但发後现新增的<tr>中的button按纽按下无任何反应，
: 於是将原来的post callback function中insert <tr>动作从
: table.html(table.html() + trHtml);
: 改为
: table.append(trHtml);
: 新插入的<tr>中的button click就可以work。
: 而且chrome中点选开发者工具->Elements可以看到使用
: table.html(table.html() + trHtml);
: 会产生一个新的<tbody>，将新插入<tr>包住，即变为
: <table>
: <tbody></tbody>
: <tbody><tr></tr></tbody>
: </table>
: 但使用table.append(trHtml);就不会有此情形发生。
: 想请教大家我本来觉得这两个写法是等价的
: table.html(table.html() + trHtml);
: table.append(trHtml);
: 但实际上并不相同，原因是出在哪边？
: 以下是我的程式(有大略简化一下)
这整件事情的问题在於一样的 HTML 并不代表一样的 JS instance ，
就你的 case 而言，这两者的确不是等价的。
其实板友讲 live / delegate / on(selector,deletagor,fn) 都是对的，
只是他们跳过问题的本质直接进入解法，所以你会觉得不明白也是正常的。
用文字解释起来可能会有点复杂，我直接举个例子应该就比较清楚。
<div id="container">
<div>
<button id="hi" >hi</button>
</div>
</div>
<script>
var node = $("#hi")[0];
node.click(function (){ alert( "hi" ;)});
$("
#container").html($("
#container").html());
//the html is replaced , so the event need to bind again.
</script>
-----------------------------------
这里有个复杂一点的例子，看完应该会比较明白。
http://jsfiddle.net/Ey3uZ/
-----------------------------------
至於 live 跟 delegate 的确是解决这个问题的方法之一，
详细你可以再翻翻文件看看为什麽，
但更重要的你得要先了解为什麽东西不会动了。
而 append 因为只在之後新增元素，而非换掉原本的元素，所以就没有问题。
-----------------------------------
同样的，即使不以 jQuery 操作，而以 innerHTML/outerHTML 在做操作时，
也要特别小心这个问题，如这个例子。
http://jsfiddle.net/Ey3uZ/1/
把
$("
#container").html($("
#container").html());
换成
$("
#container")[0].innerHTML = $("
#container")[0].innerHTML;
也会有一样的问题。
大概简要描述一下，有不了解的地方可以再问～
--
Life's a struggle but beautiful.
--
※ 发信站: 批踢踢实业坊(ptt.cc)
◆ From: 220.135.202.140