web-dev-qa-db-ja.com

jqueryライブホバー

次のjqueryコードを使用して、マウスでホバーしているテーブル行に対してのみコンテキスト削除ボタンを表示しています。これは機能しますが、オンザフライでjs/ajaxで追加された行では機能しません...

ライブイベントでこの作品を作る方法はありますか？

$("table tr").hover(
  function () {},
  function () {}
);
jquerylivejquery-1.4
162
Jorre

jQuery 1.4.1は、live（）イベントの「ホバー」をサポートするようになりましたが、イベントハンドラー関数は1つのみです。

$("table tr").live("hover",

function () {

});

または、mouseenter用とmouseleave用の2つの関数を提供できます。

$("table tr").live({
    mouseenter: function () {

    },
    mouseleave: function () {

    }
});
245
Philippe Leybaert
$('.hoverme').live('mouseover mouseout', function(event) {
  if (event.type == 'mouseover') {
    // do something on mouseover
  } else {
    // do something on mouseout
  }
});

http://api.jquery.com/live/

110
dmitko

.live()はjQuery 1.7で非推奨になりました

代わりに.on()を使用し、子孫セレクターを指定します

http://api.jquery.com/on/

$("table").on({
  mouseenter: function(){
    $(this).addClass("inside");
  },
  mouseleave: function(){
    $(this).removeClass("inside");
  }
}, "tr");  // descendant selector
59
Andre

このコードは機能します：

    $(".ui-button-text").live(
        'hover',
        function (ev) {
            if (ev.type == 'mouseover') {
                $(this).addClass("ui-state-hover");
            }

            if (ev.type == 'mouseout') {
                $(this).removeClass("ui-state-hover");
            }
        });
5
Jorge E. Cardona

JQuery 1.4.1以降、ホバーイベントはlive()で機能します。基本的にmouseenterイベントとmouseleaveイベントにバインドするだけで、1.4.1より前のバージョンでも同様に実行できます。

$("table tr")
    .mouseenter(function() {
        // Hover starts
    })
    .mouseleave(function() {
        // Hover ends
    });

これには2つのバインドが必要ですが、同様に機能します。

5
Tatu Ulmanen

警告：ホバーのライブバージョンでは、パフォーマンスが大幅に低下します。特にIE8の大きなページで顕著です。

私はAJAXでマルチレベルメニューをロードするプロジェクトに取り組んでいます（理由があります:)。とにかく、Chromeでうまく機能するホバーにはライブメソッドを使用しました（IE9は問題ありませんでしたが、うまくいきませんでした）。ただし、IE8ではメニューが遅くなるだけでなく（ドロップする前に数秒間ホバリングする必要がありました）、スクロールや単純なチェックボックスのチェックなど、ページ上のすべてが非常に遅くなりました。

ロード後にイベントを直接バインドすると、適切なパフォーマンスが得られました。

2
Brian