0

jQueryでイベントバブリングを始めたばかりなので、理解が非常に限られています。親コンテナレベルのhtmlテーブル（グリッド）行/セルで発生するすべてのイベントを処理する必要があります。例：1。ユーザーが行をクリックしたときに、クリックイベントをそれぞれにバインドするのではなく、親にバインドします。2.ユーザーがセルにカーソルを合わせると、ツールチップが表示されます。つまり、title属性をセルのテキスト要素に設定する必要があります。私もこのイベントをバブルする必要があります。

要件の最初の部分を解決することができます。パート1のコードは次のとおりです（jsFiddleを以下に追加）。

$('#grid').click(function(evt) {
    var row = $(evt.target).parent('tr'); // Get the parent row
    var cell= $(evt.target); //Get the cell
    alert('Row data: ' + row.text());
    alert('Cell data: ' + cell.text());
});

ホバーも簡単に実装できると思いました。しかし、個々のセルの値をトラップすることはできません。これがフィドルjsFiddleのサンプルコードです：セルホバーでイベントをバブルするサンプルコード

また、ホバー時にアラートが2回表示されることに気付きました。セルに対して一度イベントを発生させ、次に行/テーブルに対してイベントを発生させていると思います。わからない？

4

1 に答える 1

3

$.on次のようにこれを達成することができます。jQuery 1.7以降、、、'。delegate（）'へのすべての呼び出しは内部で使用.live()されます。そして、その要素でのみイベントをバインドし、その要素でイベントをインターセプトしてから、ターゲットが2番目のセレクターを操作するかどうかを確認します。その場合は、関数を実行します。.bind().on().on#grid

$('#grid').on('mouseenter','td', function(){
       console.log($(this).text());
   });​

ワーキングフィドル

于 2012-06-14T18:55:36.210 に答える