jquery mouseenterはデータテーブルを持ち、クロムやIEでは機能しません

Question

私はdatatablesプラグインを使用してテーブルを表示しています。設定パラメータでは、bJQueryUI : trueを設定しているので、テーブルは現在作業中のjQuery UIスタイルのスタイルを適用します。最後の列では、行を操作するアイコンをいくつか追加しました。事は、データウェアハウスのアイコンとヘッダー上のホバーイベントがFirefox、Chrome、またはIEでのみ機能し、イベントがトリガーされないことです。

私が使用しているコードはこれです：

$('.ui-state-default').live({ 
    mouseenter: 
     function(){ $(this).addClass('ui-state-hover'); }, 
    mouseleave: 
     function(){ $(this).removeClass('ui-state-hover'); } 
}); 

Answer 1

は、あなたの開発者ツールで、あなたがホバリングしたい地域内の要素のレイヤーを確認しましたか？アイテムのZ-インデックスを確認して、.ui-state-defaultの要素が一番上にあることを確認する必要があります。

の場合は、.live()も変更する必要があります。彼らは似ていますが、.delegate()でルート要素を設定することができますし、.live()でルート要素は常にdocument要素です：

$(<root element>).delegate('.ui-state-default', 'mouseenter', function() {...}).delegate('.ui-state-default', 'mouseleave', function() {...}); 

.live()はjQueryの1.7のように減価償却されています。 .on()というjQuery 1.7の新機能があり、使用する構文によっては.bind()と.delegate()と同じことをします。http://api.jquery.com/on