作者sabiya (別赤腳走路)
看板Ajax
標題[問題] 關於jQuery的html()和apend()
時間Wed Apr 25 14:01:26 2012
主要運作的流程如下：
使用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)
1F：推 UniFish:各瀏覽器對table的操作不太一樣.. 04/25 14:12
2F：→ UniFish:解答你第一個問題，$(':button').live('click', function) 04/25 14:13
3F：→ UniFish:可以解決新長出來的button沒有被bind event 04/25 14:13
4F：推 lgzenith:.live()在1.7之後不建議使用，改用.delegate()會比較好 04/25 18:56
5F：推 akiratw:1.7 之後就用 .on() / .off() 吧 04/25 20:36
6F：→ akiratw:可以少打好幾個字（誤 04/25 20:36
7F：→ chrisQQ:用 on +1 04/26 14:16