作者sabiya (別赤腳走路)
看板Ajax
標題Re: [問題] 關於jQuery的html()和apend()
時間Fri Apr 27 12:58:40 2012
首先感謝版大詳細回答，
還有版友的回答，
深刻了解到html()和append()的差異。
但是其實在我post callback function最後面，
除了把<tr>插進來外，
我是有去把所有的button event handler都移除，
再對所有的button加上click event handler，
這樣是不是無論是使用html()或append()都會把event handler bind給所有button？
$.post('admin_polling.php',
{method:'polling', docID:docNum, marketID:marketNum, dealID:dealNum},
function(data){
var trHtml = '<tr><td>xxxxx</td>
<td>
<button title="doc" class="cancel">結案
</button>
</td>
</tr>';
var table = $('#content table');
table.append(trHtml);
$("button").off();
$('button').click(clickBtn);
setTimeout("polling()",10000);
},'json');
※ 引述《TonyQ (自立而後立人。)》之銘言：
: ※ 引述《sabiya (別赤腳走路)》之銘言：
: 這整件事情的問題在於一樣的 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;
: 也會有一樣的問題。
: 大概簡要描述一下，有不了解的地方可以再問～
--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 60.249.161.162