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