[問題] 關於jQuery的html()和apend()
主要運作的流程如下：
使用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)
推
04/25 14:12, , 1F
04/25 14:12, 1F
→
04/25 14:13, , 2F
04/25 14:13, 2F
→
04/25 14:13, , 3F
04/25 14:13, 3F
推
04/25 18:56, , 4F
04/25 18:56, 4F
推
04/25 20:36, , 5F
04/25 20:36, 5F
→
04/25 20:36, , 6F
04/25 20:36, 6F
→
04/26 14:16, , 7F
04/26 14:16, 7F
討論串 (同標題文章)
以下文章回應了本文：
完整討論串 (本文為第 1 之 4 篇)：