Question

这是我的代码：

＆＃13;

$.fn.right = function() {
   return $(document).width() - (this.offset().left + this.outerWidth());
}

$(document).ready(function(){
  $('a').bind('mouseenter', function() {
    var self = $(this);
    this.iid = setTimeout(function() {
      var tag_name = self.text(),
          top      = self.position().top + self.outerHeight(true),
          right = self.right();
      $('body').append("<div class='tag_info'>Some explanations about "+tag_name+"</div>");
      
      $(".tag_info").css({top: top + "px", right: right + "px"}).fadeIn(200);  
      
    }, 525);
  }).bind('mouseleave', function(){
    if(this.iid){
      clearTimeout(this.iid)
      $('.tag_info').remove();
    }
  });
});

＆＃13;

    body{
      padding: 20px;
      direction: rtl;
    }

    a {
        color: #3e6d8e !important;
        background-color: #E1ECF4;
        padding: 2px 5px;
    }
    .tag_info{
      position: absolute;
      width: 130px;
      height: 100px;
      display:none;
      background-color: black;
      color: white;
      padding: 10px;
    }

＆＃13;

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <a>long-length-tag</a>
    <a>tag</a>

＆＃13;

工作正常。但实际上，内容（那些标签）将在以后创建。我的意思是他们将被创建为ajax响应。因此$('a')不会选择它们。

现在我把它写成$(document).bind('mouseenter', 'a', function(){ ... })，使其即使对于页面加载后创建的DOM也能正常工作。

但正如您在this fiddle中看到的那样，它并不起作用。有谁知道问题是什么以及如何解决？

Answer 1

您需要将事件与.on()绑定。这也适用于未来的元素。

$(document).on('mouseenter', 'a', function(){ ... });

而且，正如@Gregg所回答的那样，.bind()已被.on()取代。这就是为什么你的小提琴不起作用的真正原因。

Answer 2

自jQuery 1.7起，on()函数已替换bind()。如果您阅读了文档，那么您会注意到live()实际上用于代理事件，例如您{I}尝试实现的事件，而bind()方法却没有;将事件绑定到稍后将添加到DOM的元素。 on()函数可以执行此操作。无论是来自文件本身还是来自直接后代。

Answer 3

在响应您的AJAX调用时创建锚标记时，将id放入其中：

$('body').append("<div class='tag_info' id='myTag'>Some explanations about "+tag_name+"</div>");

然后你可以像这样绑定事件mouseenter或mouseleave：

 $('#myTag').bind('mouseenter',  function(){
    alert('Mouse Enter in your Anchor Tag');
 }).bind('mouseleave', function(){
    alert('Mouse leave');
});

为什么文档选择器不适用于mouseenter事件？

3 个答案: