作者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