2

Jquery でいくつか問題が発生しています。基本的に、私は .html() 応答を出力しており、マウスオーバーでテーブルの行を強調表示する必要がありますが、機能しません。

HTML テーブル

<table id='simplehighlight'>
<tr>
 <td>header 1</td>
 <td>header 2</td>
</tr>
<tr>
 <td>bla bla bla</td>
 <td>highlight this row</td>
</tr>
<tr>
 <td>bla bla bla</td>
 <td>or highlight this row</td>
</tr>
</table>

上の表は、PHP のエコーを出力したものです。PHP スクリプトは ajax で呼び出され、応答は .html() 関数を使用して div 内に出力されます。例：

function(data, textStatus) {
          if(textStatus == "success") {
             $('#resultBox').html(data);
          }
        }, 'text/html');
}

dataはHTML テーブルです。最後になりましたが、機能しないハイライトをアクティブにするためのjqueryコードがあります。

    $("simplehighlight tr").not(':first').hover(
       function () {
                    $(this).css("background","yellow");
       },
       function () {
                    $(this).css("background","");
       }
    );

行を強調表示する代わりに、機能するかどうかを確認するための簡単なアラートを設定しましたが、明らかに機能しません。なんで？私のコードで何が問題になっていますか? これらの行を強調表示するには、どうすればタスクを達成できますか?

みんなありがとう、アルベルト-

4

4 に答える 4

2

jQuery を介してイベント ハンドラーをアタッチすると、次のようにon動作するはずです。

$('body').on('mouseenter mouseleave', '#simplehighlight tr:not(:first-child)', function() {
    $( this ).toggleClass( 'highlighted' );
} );

この jsFiddleを参照してください。

この方法を使用することの良い点onは、言及したテーブルをいつでも追加できることです (たとえば、AJAX 呼び出しを介して)。onjQuery マッチで ( のように) 直接呼び出すとjQuery("#simplehighlight tr").not(':first').on(...)、jQuery はハンドラーを現在存在するDOM 要素にのみバインドします。

注:は jQuery 1.9 以降で削除されたため、hoverイベントをに置き換えました。mouseenter mouseleavehover

jQuery 1.8 で非推奨、1.9 で削除: 文字列「mouseenter mouseleave」の短縮形として使用される「hover」という名前。

ソース: http://api.jquery.com/on/

于 2013-05-30T09:54:24.517 に答える
0

試す

jQuery("#simplehighlight tr").not(':first').mouseover(function(){
    // do highlight stuffs here
    alert("IT WORKS??");
});

ここに js フィドル をここに

于 2013-05-30T09:45:37.893 に答える