[問題] 關於jQuery的html()和apend()

[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:
<div id="content">
        <table>
                <td>xxxx</td>
                <td>aaaa</td>
                <td>
                        <button class="cancel" >btn</button>
                </td>
        </table>
</div>

JS:
$('document').ready(function(){
        $('button').click(clickBtn);
        polling();
});

function polling()
{
        $.post('admin_polling.php',
                        {method:'polling', docID:docNum,
                         marketID:marketNum, dealID:dealNum},
                        function(data){
                                 var trHtml = '<tr><td>滕本</td>
                                 <td width="10%">eeee
                                 </td><td>dddd
                                 </td><td>cccc
                                 </td><td>bbbb
                                 </td><td>aaaa
                                 </td><td>xxx</td>
                                 <td>
                                     <button title="doc" class="cancel">結案
                                     </button>
                                 </td>
                                 </tr>';

                                 var table = $('#content table');
                                 table.append(trHtml);

                        //Remove all event handlers from all buttons
                        //and Add new one
                        $("button").off();
                        $('button').click(clickBtn);
                                setTimeout("polling()",10000);
                        },'json');
}

--
※ 發信站: 批踢踢實業坊(ptt.cc)
◆ From: 60.249.161.162
※ 編輯: sabiya          來自: 60.249.161.162       (04/25 14:03)
※ 編輯: sabiya          來自: 60.249.161.162       (04/25 14:04)
※ 編輯: sabiya          來自: 60.249.161.162       (04/25 14:07)
推 UniFish:各瀏覽器對table的操作不太一樣..
→ UniFish:解答你第一個問題，$(':button').live('click', function)
→ UniFish:可以解決新長出來的button沒有被bind event
推 lgzenith:.live()在1.7之後不建議使用，改用.delegate()會比較好
推 akiratw:1.7 之後就用 .on() / .off() 吧
→ akiratw:可以少打好幾個字（誤
→ chrisQQ:用 on +1