無法通過javascript單擊呈現的輸出

Question

我有一個表單，它在行的單擊事件上運行一個函數。它工作的很好，但是當一個tr通過AJAX添加到此表中時，我無法觸發此行的單擊事件，或者我們可以說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>' 
    ); 
    } 
    } 
} 
} 

Answer 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.'); 
}); 

的.on()方法在版本中使用晚於1.7處理事件的代表團。在以前的版本中，我們使用.delegate()。

Answer 2

這是因爲DOM沒有意識到您添加的tr。你在使用jQuery嗎？

如果是這樣，則使用.live()或.on()如果您使用的是jQuery 1.7+。

祝你好運！