Jquery 将事件添加到已创建的元素

我正在更新我的代码。。。大多数事情都是可以解决的。问题仍然存在：

当我在元素（1和2）之间更快地移动鼠标时，工具提示不会显示

我认为发生这种情况是因为我在离开时有延迟：

$this.mouseleave(function (e) {
  tooltip.timer = setTimeout(function () {
    $("." + options.class).detach();
  }, !options.mouse || options.static ? options.delay || 0 : 0);
}), // Mouse leave  

当工具提示中有链接时，我可以允许鼠标在工具提示上移动

这样做的目的是在鼠标移动到另一个元素上时取消隐藏延迟

插件可以在中进行测试

整个代码如下所示：

(function ($) {

  $.fn.Tooltip = function (options) {

    var defaults = {
      class: 'Tooltip',
      content: '',      
      delay: 120,
      mouse: false,
      offset: [0, -20],
      static: true,
      effect: function ($element, $tooltip) {
        $tooltip.fadeIn(200);
      }      
    };

    options = $.extend({}, defaults, options);

    $(this).each(function (e) {
      var $this = $(this);
      var tooltip = { timer: null, title: $this.attr('title') };

      $this.mouseenter(function (e) {

        var $tooltip =
          $("<div>")
          .attr("class", options.class)
          .html(options.content !== '' ? (typeof options.content === 'string' ? options.content : options.content($this, $tooltip)) : tooltip.title)
          .appendTo('body');

        $this.attr('title', '');

        var position = [0, 0];

        if (options.mouse) {
          position = [e.clientX + options.offset[0] + $(window).scrollLeft(), e.clientY + options.offset[1] + $(window).scrollTop()];
        } else {
          var coordinates = $this[0].getBoundingClientRect();       
          position = [
            (function () {
              if (options.offset[0] < 0)
                return coordinates.left - Math.abs(options.offset[0]) - $tooltip.outerWidth() + $(window).scrollLeft();
              else if (options.offset[0] === 0)
                return coordinates.left - (($tooltip.outerWidth() - $this.outerWidth()) / 2) + $(window).scrollLeft();
              else
                return coordinates.left + $this.outerWidth() + options.offset[0] + $(window).scrollLeft();

            })(),
            (function () {
              if (options.offset[1] < 0)
                return coordinates.top - Math.abs(options.offset[1]) - $tooltip.outerHeight() + $(window).scrollTop();
              else if (options.offset[1] === 0)
                return coordinates.top - (($tooltip.outerHeight() - $this.outerHeight()) / 2) + $(window).scrollTop();
              else
                return coordinates.top + $this.outerHeight() + options.offset[1] + $(window).scrollTop();

            })()
          ];
        }

        $tooltip.css({ left: position[0] + 'px', top: position[1] + 'px' });

        options.effect($this, $tooltip.stop(true, true));

        $tooltip.mouseenter(function () {
          window.clearTimeout(tooltip.timer);
          tooltip.timer = null;
        }); // Tooltip enter

        $tooltip.mouseleave(function () {
          tooltip.timer = setTimeout(function () {
            $tooltip.remove();
          }, !options.mouse || options.static ? options.delay || 0 : 0);
        });

      }), // Mouse enter

      $this.mouseleave(function (e) {
        tooltip.timer = setTimeout(function () {
          $("." + options.class).remove();
        }, !options.mouse || options.static ? options.delay || 0 : 0);
      }), // Mouse leave  

      $this.mousemove(function (e) {
        if (options.mouse && !options.static) {
          $("." + options.class).css({ left: e.clientX + options.offset[0] + $(window).scrollLeft() + 'px', top: e.clientY + options.offset[1] + $(window).scrollTop() + 'px' });
        }
      }); // Mouse move
    }); // Each
  }; // Tooltip
})(jQuery); // JQuery

（函数（$）{
$.fn.Tooltip=函数（选项）{
var默认值={
类：“工具提示”，
内容：“”，
延误：120，
老鼠：错，
偏移量：[0，-20]，
静态：是的，
效果：函数（$element，$tooltip）{
$tooltip.fadeIn（200）；
}      
};
选项=$.extend（{}，默认值，选项）；
$（此）。每个（功能）（e）{
var$this=$（this）；
var工具提示={timer:null，title:$this.attr（'title'）}；
$this.mouseenter（函数（e）{
var$工具提示=
$("")
.attr（“类”，选项.class）
.html（options.content！=''？（typeof options.content==='string'？options.content:options.content（$this$tooltip））：tooltip.title）
.附于（“主体”）；
$this.attr（'title'，''）；
var位置=[0,0]；
if（options.mouse）{
位置=[e.clientX+options.offset[0]+$（窗口）.scrollLeft（），e.clientY+options.offset[1]+$（窗口）.scrollTop（）]；
}否则{
变量坐标=$this[0]。getBoundingClientRect（）；
职位=[
（功能（）{
如果（选项偏移量[0]<0）
return coordinates.left-Math.abs（options.offset[0]）-$tooltip.outerWidth（）+$（window.scrollLeft（）；
else if（options.offset[0]==0）
返回coordinates.left-（$tooltip.outerWidth（）-$this.outerWidth（））/2）+$（window.scrollLeft（）；
其他的
return coordinates.left+$this.outerWidth（）+options.offset[0]+$（window.scrollLeft（）；
})(),
（功能（）{
如果（选项偏移量[1]<0）
return coordinates.top-Math.abs（options.offset[1]）-$tooltip.outerHeight（）+$（window.scrollTop（）；
else if（options.offset[1]==0）
返回坐标.top-（$tooltip.outerHeight（）-$this.outerHeight（））/2）+$（window.scrollTop（）；
其他的
return coordinates.top+$this.outerHeight（）+options.offset[1]+$（window.scrollTop（）；
})()
];
}
$tooltip.css（{left:position[0]+'px'，top:position[1]+'px'}）；
options.effect（$this$tooltip.stop（true，true））；
$tooltip.mouseenter（函数（）{
clearTimeout（工具提示计时器）；
tooltip.timer=null；
})；//工具提示输入
$tooltip.mouseleave（函数（）{
tooltip.timer=setTimeout（函数（）{
$tooltip.remove（）；
}，！options.mouse | | options.static？options.delay | | 0:0）；
});
})，//鼠标输入
$this.mouseleave（函数（e）{
tooltip.timer=setTimeout（函数（）{
$（“+options.class）.remove（）；
}，！options.mouse | | options.static？options.delay | | 0:0）；
})，//鼠标离开
$this.mousemove（函数（e）{
if（options.mouse&&！options.static）{
$（“+options.class）.css（{left:e.clientX+options.offset[0]+$（window.scrollLeft（）+'px'，top:e.clientY+options.offset[1]+$（window.scrollTop（）+'px'}）；
}
})；//鼠标移动
})；//每个
}；//工具提示
})（jQuery）；//JQuery

我使用超时来允许鼠标在工具提示上移动

有人知道如何解决当前的问题吗

---

谢谢大家!

将mouseleave功能替换为：

    $(this).mouseout(function (e) {
       setTimeout(function(){
       $("#Tooltip").remove();
       }, 1000);
    }),

---

但1s后，问题将是相同的：工具提示将消失。

创建工具提示后：

    $('#Tooltip').mouseenter(function(){
      $(this).addClass('active');
    });
     $('#Tooltip').mouseleave(function(){
        setTimeout(function(){
          $("#Tooltip").remove();
        }, 1000);  
    });   

离开工具提示区域时，请检查“活动”类是否存在

  $(this).mouseout(function (e) {
    if($('#Tooltip').hasClass('active'))
    {
      setTimeout(function(){
        $("#Tooltip").remove();
      }, 1000);
    }
  });

---

您可能需要尝试此插件-

您可以使用

mouseontopup

选项与工具提示交互

$('#mouseon-examples div').powerTip({
    placement: 'e',
    mouseOnToPopup: true // <-- Important bit
});

$（'#mouseon examples div'）。powerTip({
位置：'e'，
mouseontopup:true//
可能您在帖子中忘记了一些代码，但超时id没有存储在任何位置，因此无法清除。您可以编写
timer=setTimeout（…
），其中timer的定义如下

 $(this).each(function () {     
   var $this = $(this),
       timer;

然后你就可以很容易地清除

 $tooltip.mouseenter(function (e) {
   clearTimeout(timer);
 });

你的鼠标器应该是

 $tooltip.mouseleave(function (e) {
  $(this).remove(); //or $tooltip.remove();
 })  


我验证了这确实删除了工具提示。我不知道你为什么说它没有。奇怪。
正如我所说，我支持建议“使用一个已经存在的插件，人们已经遇到并考虑过它的情况”.也许这个插件不行，但考虑到插件的工具提示数量，你应该找到你的需要

也就是说：

您的问题是，您的函数系统地调用了
.remove（）
，当它应该执行类似
的操作时，请检查是否应该删除工具提示，如果是，请执行该操作

function incrVisCounter($tooltip){
    var cnt = 1 + $tootltip.data('visCounter');
    $tootltip.data('visCounter', cnt);
}

function decrVisCounter($tooltip){
    setTimeout(function(){
        var cnt = $tootltip.data('visCounter') - 1;
        $tootltip.data('visCounter', cnt);
        if (cnt <= 0) {
            $tooltip.remove();
        }
    }, 300);
}


    $this.mouseenter(function (e) {
        displayTooltipIfNotShownAlready($this); //<- you will need to write some code here ...

        incrVisCounter( $('#tooltip') );
    });

    $this.mouseleave(function (e) {
        decrVisCounter( $('#tooltip') );
    });


    $tooltip.mouseenter(function (e) {
        incrVisCounter( $(this) );
    });

    $tooltip.mouseleave(function (e) {
        decrVisCounter( $(this) );
    });

你想做什么

在要触发工具提示的区域上侦听鼠标悬停/单击事件。
你做的那部分

在工具提示上显示在主体上绑定全局事件侦听器。侦听mousemove，然后检查是否在工具提示或触发器元素中

如果没有，则隐藏工具提示并删除全局偶数侦听器

一点伪代码

onShow: function(){
  $('body').off('mousemove');
  //might want to do _.debounce to make sure you dont trigger it to often
  $('body').on('mousemove', function(e){
     if(!$tooltip.has(e.target) && !$this.has(e.target)) {
       $tooltip.hide(); 
     }
  });
}

onHide: function(){
  //naturally you should be more careful with this 
  //and not just blindly remove all mousemose on the body
  //easy fixed by giving the event a unique id
  $('body').off('mousemove')
}

我没有错，你需要这样做，对吗？你创建了这个插件吗？你也考虑过使用吗？你的代码笔链接似乎已经断了。试试hint.css，不要依赖javascript。我刚刚更新了我的代码。只剩下一个问题。有人知道如何解决吗？@没有，没有。
mouseout
bubbles，
mouseleavefunction incrVisCounter($tooltip){
    var cnt = 1 + $tootltip.data('visCounter');
    $tootltip.data('visCounter', cnt);
}

function decrVisCounter($tooltip){
    setTimeout(function(){
        var cnt = $tootltip.data('visCounter') - 1;
        $tootltip.data('visCounter', cnt);
        if (cnt <= 0) {
            $tooltip.remove();
        }
    }, 300);
}


    $this.mouseenter(function (e) {
        displayTooltipIfNotShownAlready($this); //<- you will need to write some code here ...

        incrVisCounter( $('#tooltip') );
    });

    $this.mouseleave(function (e) {
        decrVisCounter( $('#tooltip') );
    });


    $tooltip.mouseenter(function (e) {
        incrVisCounter( $(this) );
    });

    $tooltip.mouseleave(function (e) {
        decrVisCounter( $(this) );
    });

 $this.mouseenter(function(){
     var $tooltip = ...

     $this.data('tooltip', $tooltip);
 });

 $this.mouseleave(function(){
     var $tooltip = $this.data('tooltip');
     setTimeout(function(){ $tooltip.remove() }, delay);
 });

onShow: function(){
  $('body').off('mousemove');
  //might want to do _.debounce to make sure you dont trigger it to often
  $('body').on('mousemove', function(e){
     if(!$tooltip.has(e.target) && !$this.has(e.target)) {
       $tooltip.hide(); 
     }
  });
}

onHide: function(){
  //naturally you should be more careful with this 
  //and not just blindly remove all mousemose on the body
  //easy fixed by giving the event a unique id
  $('body').off('mousemove')
}