6

こんにちは、いくつかの要素を動的に追加しています。バインドしてhover()使用しようとon()していますが、コールバック関数では機能しないようです。何か案は？

jQuery：

$(document.body).on('hover', 'div.settings-container', function () {
     $(this).find('ul.settings-links').fadeIn();
}, function () {
     $(this).find('ul.settings-links').fadeOut();
});

jsfiddleは単純化されています。

4

6 に答える 6

6

jQueryでは$(selector).hover(handlerIn, handlerOut) 、のショートカットです

$(selector).mouseenter(handlerIn).mouseleave(handlerOut);

hovermouseenterはイベントではありません。代わりにandを使用する必要がありますmouseleave。

$('body').on({
  mouseenter: function() {
     $(this).find('ul.settings-links').fadeIn();
  },
  mouseleave: function() {
     $(this).find('ul.settings-links').fadeOut();
  }
}, 'div.settings-container');
于 2012-10-12T06:46:28.750 に答える
1

メソッド「on」は両方のイベントのショートカットとして「hover」を使用します - mouseenter と mouseleave は event.type を使用してそれらを検出します

$(document).on('hover', 'a.hover-me', function (e) {
    if (e.type == "mouseenter") {
        alert("show");
    } else {
        alert("hide");
    }
});​

フィドル

于 2012-10-12T06:46:46.910 に答える
0

上のjqueryドキュメントに関する追加のメモから

jQuery 1.8 で非推奨: 「hover」という名前は、文字列「mouseenter mouseleave」の短縮形として使用されます。これら 2 つのイベントに対して 1 つのイベント ハンドラーをアタッチし、ハンドラーは event.type を調べて、イベントが mouseenter または mouseleave であるかどうかを判断する必要があります。"hover" 疑似イベント名を、1 つまたは 2 つの関数を受け入れる .hover() メソッドと混同しないでください。

したがって、で使用するhoverと、このホバーをon使用していると想定されます。

A function to execute when the mouse pointer enters or leaves the element.

したがって、どちらを使用しても、

$(document).on('hover', 'ul.settings-links', function (e) {
    if (e.type == "mouseenter") {
        alert("show");
    } else {
        alert("hide");
    }
});​

OR

$('body').on({
  mouseenter: function() {
     $(this).find('ul.settings-links').fadeIn();
  },
  mouseleave: function() {
     $(this).find('ul.settings-links').fadeOut();
  }
}, 'div.settings-container');

hover2 つの関数をパラメーターとして受け入れるは使用できません。

于 2012-10-12T07:02:37.403 に答える
0

.on()とhoverイベントの同時利用は不可！:(

フォールバックとして、次のスクリプトを使用できます。

$("div.settings-container").on({
    mouseenter: function () {
        alert("Mouse Over!");
    },
    mouseleave: function () {
        alert("Mouse Out!");
    }
});

フィドル: http://jsfiddle.net/mFeVX/2/

于 2012-10-12T06:45:14.023 に答える
0

mouseenter代わりにandを使用しmouseoutてイベントをデリゲートしてください... ...hover()と一緒に使用することはできません。.on()

于 2012-10-12T06:46:46.097 に答える
-1

このフィドルをチェックしてください

 $('a.hover-me').on({
     mouseenter: function(){
       $('.test').show();
     },
     mouseleave: function(){
      $('.test').hide();
    }
});
于 2012-10-12T08:22:50.317 に答える