我有一个表,它在行的click事件上运行一个函数。它工作得非常好但是当一个tr被AJAX添加到这个表中时,我无法触发此行的click事件或者我们可以说click事件没有为此行触发,除了其他行仍然能够触发click事件。
$('div.dashboard-content table.list tbody tr').click(function(){
var id = $(this).attr('id');
$('div.dashboard-content table.list tr td').css({'background': '#ffffff','font-weight':'normal'});
$('div.dashboard-content table.list thead td').css({'background': '#EFEFEF','font-weight':'bold'});
$('tr[id='+ id + '] td').css({'background': 'lightblue','font-weight':'bolder'});
$.get(
'index.php?route=sale/order/infoforhome&token=<?php echo $token; ?>',
{ 'order_id' : id },
function(data){
if(data)
{
$('#oder_detail').html
('<table>' +
'<tbody>' +
'<tr>'+
'<td style="font-weight:bold;">' +
'<?php echo $column_orderid; ?>:'+
'</td>'+
'<td>' +
data['orderid'] +
'</td>'+
'</tr>' +
'<tr>'+
'<td style="font-weight:bold;">'+
'<?php echo $column_customername; ?>:'+
'</td>'+
'<td>'+
data['name'] +
'</td>'+
'</tr>'+
'<tr>'+
'<td style="font-weight:bold;">'+
'<?php echo $column_shippingaddress; ?>: '+
'</td>'+
'<td>'+
data['address'] +
'</td>'+
'</tr>'+
'<tr>'+
'<td style="font-weight:bold;">'+
'<?php echo $column_telephone; ?>:'+
'</td>'+
'<td>'+
data['telephone'] +
'</td>'+
'</tr>'+
'<tr>'+
'<td style="font-weight:bold;">'+
'<?php echo $column_orderstatus; ?>:'+
'</td>'+
'<td>'+
data['orderstatus'] +
'</td>'+
'</tr>'+
'<tr>'+
'<td style="font-weight:bold;">'+
'<?php echo $column_ordertotal; ?>:'+
'</td>'+
'<td>'+
data['total'] +
'</td>'+
'</tr>'+
'</tbody>'+
'</table>');
}
else
{
$('#order_detail').html('Sorry No Details exists for this order in the database');
}
}, 'json');
});
function getLatestOrders() {
var last_order_id = $('div.dashboard-content table.list tbody tr:first').attr('id');
$.get(
"index.php?route=common/home/latest&token=<?php echo $token; ?>",
{'order_id' : last_order_id },
function (data) {
if (data) {
for (var i = 0; i < data.length; i++) {
$('div.dashboard-content table.list tbody tr:first').before(
'<tr id="' +
data[i]['order_id'] +
'"><td class="right">' +
data[i]['order_id'] +
'</td><td class="left">' +
data[i]['customer'] +
'</td><td class="left">' +
data[i]['status'] +
'</td><td class="left">' +
data[i]['date_added'] +
'</td><td class="right">' +
data[i]['total'] +
'</td><td class="right"> [<a href="' +
data[i]['action']['href'] + '">' +
data[i]['action']['text'] +
'</a>]</td></tr>'
);
}
}
}
}
答案 0 :(得分:1)
答案 1 :(得分:1)
您需要将click函数绑定到父元素,以便事件可以正确冒泡。我看不到任何结构,所以我将在这里做一些假设。
//bind to document.
$(document).on('click', 'table > tr', function(){
//now all rows will have a click function, regardless of ajax.
alert('Expected click fired.');
});
在1.7之后的版本中使用.on()方法来处理事件委派。在以前的版本中,我们使用.delegate()。