0

空のテーブルに多数の行とセルを入力する単純なJqueryスクリプトがあります。

チェックボックスの状態に応じて、新しく入力されたテーブル内のすべてのセルのCSSクラスを切り替えます（ページの読み込み時にはありませんが、フォームの送信時にJS関数によって動的に作成されます）。

テーブルセルに「クリック」イベントを設定でき、正常に機能します。

しかし、関数をイベントon()にバインドするために使用する試みは成功していません。hover()イベントがトリガーされたようには見えず、コンソールログメッセージも生成されません。私が間違っていることについて何か考えはありますか？

$("#resultTable").click(function(e){  // This function works fine.
        $(e.target).closest('td').toggleClass('stay');
    });

$("#resultTable td").on("hover", //Same problem for a simpler 'mouseover'
    function(event){
        console.log("MOUSE OVER"); //Never appears
        $(this).toggleClass('over');
    },
    function(event){
        console.log("MOUSE OUT"); //Never appears
        $(this).toggleClass('over');
    }
    );
4

2 に答える 2

2

テーブルに行を動的に挿入する.on場合、バインディングが発生した後に存在する tds にバインドされていると機能しません。ドキュメントから呼び出し.onが行われると、イベントがバインドされる要素は、バインディングが発生したときにDOMに存在する必要があります。

イベント ハンドラーは、現在選択されている要素にのみバインドされます。これらは、コードが .on() を呼び出す時点でページに存在している必要があります。

これはうまくいくかもしれません

$j(document).on("hover", "#resultTable td",
    function(event){
        console.log("MOUSE OVER"); //Never appears
        $(this).toggleClass('over');
    },
    function(event){
        console.log("MOUSE OUT"); //Never appears
        $(this).toggleClass('over');
    }
    );

行を動的に追加するだけの場合は、イベントを添付し#resultTableて委任を少し速くすることができます。

于 2012-09-19T10:36:01.330 に答える
0

試してみてくださいdelegate..サポートしているバージョンがわからないon

$("#resultTable").delegate("td","mouseover", function(event){
        console.log("MOUSE OVER"); //Never appears
        $(this).addClass('over');
    });

$("#resultTable").delegate("td","mouseout",function(event){
        console.log("MOUSE OUT"); //Never appears
        $(this).removeClass('over');
    });
于 2012-09-19T10:36:08.980 に答える