4

ページをロードするときに行をクリックすると、コンソールにログが記録されclickedます。

ただし、テーブルを並べ替える（テーブルヘッダーをクリックする）tr場合、行をクリックしようとしてもクリックイベントは発生しません。

私はこのプラグインを使用しています：tablefixedheader

jQuery

$(document).ready(function(){
    $("table.ex").fixheadertable({
        caption        : 'Tarefas Disponíveis',
        showhide    : false,
        height        : '265',
        zebra       : true,
        zebraClass  : 'ui-state-default',
        sortable    : true,
        sortedColId : 0,
        dateFormat  : 'Y/m/d',
        pager        : true,
        rowsPerPage    : 25,
        colratio    : [110,150],
        minColWidth : 110,
        resizeCol    : true
    });

    // problem with this click
    // The event isn't triggered:

    $("table.ex tr").click(function(){
        console.log('clicked');
    });

});

デモ http://jsfiddle.net/QpU3c/

4

2 に答える 2

12

プラグインは元の要素を変更し、アタッチされたイベントハンドラーを失うため、イベント委任を使用する必要があります。trハンドラーは確かに変更されていないため、テーブル自体にアタッチする必要があります。

$("table.ex").on('click', 'tr', function(){
    console.log('clicked');
});

jsFiddleデモ

于 2012-06-21T16:24:23.220 に答える
4 
$("table.ex").on('click', 'tr', function(){
    console.log('clicked');
});

デモ

ノート

デリゲートイベントが必要です。これは、を並べ替えるときにtable、を.fixheadertable()削除しtrて、テーブルに新たに追加するためです。したがって、ソート後、これらtrは動的要素として扱われます。

.on()forデリゲートイベントの構文は次のようになります。

$(container).on(eventName, target, handlerFunction)
于 2012-06-21T16:24:20.730 に答える