Question

我有一个js文件，其中包含.on（＆＃34;点击＆＃34;，...）链接发生，我还想添加一个悬停事件。我的代码是：

}).on('hover' , '.tooltip' , function (e) {
   if (e.type == "mouseenter") {
      var tip = $(this).attr('title');
      var tipTemp = $(this).attr('data-title', tip);
      $('#tooltip').remove();
      $(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
      $(this).removeAttr('title');      
      $('#tooltip').fadeIn(300);
    }else{
      $(this).attr('title', $(this).attr('data-title'));
      $('#tooltip').fadeOut(300);
      $(this).removeAttr('data-title');
    }
});

我知道我实际上只能以这种方式传递一个函数，因此我正在检查事件类型以触发相应的行为。这对我来说似乎不起作用。有什么想法吗？

Answer 1

我认为这就是你想要的

}).on('mouseenter' , '.tooltip' , function (e) {
    var tip = $(this).attr('title');
    var tipTemp = $(this).attr('data-title', tip);
    $('#tooltip').remove();
    $(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
    $(this).removeAttr('title');      
    $('#tooltip').fadeIn(300);
});

}).on('mouseleave' , '.tooltip' , function (e) {
    $(this).attr('title', $(this).attr('data-title'));
    $('#tooltip').fadeOut(300);
    $(this).removeAttr('data-title');
});

Answer 2

您可以一次绑定多个事件处理程序。在你的情况下，它将是：

.on('mouseenter mouseleave' , '.tooltip' , function (e) { ... });

Answer 3

您不需要if (e.type == "mouseenter") {

并且hover不是与.on()一起使用的有效方法 - 虽然我对此不确定..使用mouseover或mouseenter

将其用作：

$('.tooltip-holder').on('mouseover' , '.tooltip' , function () {
      var tip = $(this).attr('title');
      var tipTemp = $(this).attr('data-title', tip);
      $('#tooltip').remove();
      $(this).parent().append('<div id="tooltip">' + tipTemp + '</div>');
      $(this).removeAttr('title');      
      $('#tooltip').fadeIn(300);      
});

$('.tooltip-holder').on('mouseout' , '.tooltip' , function () {
      $(this).attr('title', $(this).attr('data-title'));
      $('#tooltip').fadeOut(300);
      $(this).removeAttr('data-title');
});

Fiddle

Answer 4

根据jQuery source code，hover未包含在触发导致JQuery .on()的事件列表中，因为.hover()只是JQuery .mouseenter()的快捷方式和.mouseleave()。因此，简而言之，无法使用hover .on()，如下所示：

}).on('hover' , '.tooltip' , function (e) {...

因此，您可以选择使用.mouseenter()和.mouseleave()，如下所示：

.on({
    mouseenter: function () {
        //stuff to do on mouse enter
    },
    mouseleave: function () {
        //stuff to do on mouse leave
    }
}, '.tooltip');

.on（＆＃34; hover＆＃34;，...）链接不起作用

4 个答案: