0

行のクリックイベントで関数を実行するテーブルがあります。完全に正常に動作していますが、AJAX によってこのテーブルに tr が追加されると、この行のクリック イベントを発生させることができません。または、他の行がまだクリック イベントを発生させることができる以外に、この行のクリック イベントが発生していないと言えます。 .

$('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>'
      );
    }
  }
}
}
4

2 に答える 2

1

これは、tr追加した を DOM が認識していないためです。jQueryを使用していますか？

その場合、jQuery 1.7 以降を使用している場合は.live()または.on()を使用します。

幸運を！

于 2012-09-02T02:56:00.223 に答える
1

イベントが適切にバブリングできるように、クリック関数を親要素にバインドする必要があります。構造が見えないので、ここでいくつかの仮定を立てます。

//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()を使用していました。

于 2012-09-02T02:56:26.483 に答える