jquery - 使用鼠标悬停的 jQuery 的 on() 函数不起作用

Question

我想在悬停文本时创建一个小弹出框。但它不起作用，我不明白为什么......你能帮我吗？我想在悬停“surpi”时显示“data-popup”内容。这行 html 是由 javascript 动态生成的。这是我的代码:

<a href="#" data-popup="surpris">supri</a>

$(document).ready(function() {
  popup();
});

function popup() {
  $("#correction").on("mouseover", "a", function() {
    var data = $(this).attr("data-popup"),
      offsetDataTop = $(this).offset().top,
      offsetDataLeft = $(this).offset().left;

    if (data != "") {
      // .popup creation
      $("body").prepend("<div class='popup'>" + data + "</div>");
      // .popup properties
      var popupWidth = $(".popup").innerWidth(),
        thisWith = $(this).innerWidth(),
        marginLeft = (thisWith - popupWidth) / 2;
      // .popup init
      $(".popup").css({
        opacity: 0,
        top: offsetDataTop - 40,
        left: offsetDataLeft + marginLeft
      });
      // .popup animation
      $(".popup").animate({
        opacity: 1,
        marginTop: 20
      }, "fast");
    }
  }, function() {
    $(".popup").remove();
  }); // .popup removed
};

Answer 1

下面是我将如何使用 mouseenter 和 mouseleave 执行此操作:

$(document).ready(function() {
  $('#correction').on('mouseenter', '[data-popup]', function() {
    var $this=$(this)
    var data =$this.attr("data-popup").trim();
    var offsetDataTop = $this.offset().top;
    var offsetDataLeft = $this.offset().left;
    if (data != "") {
      // .popup creation
      var $popup=$("<div class='popup'>" + data + "</div>");
      $("body").prepend($popup);
      // .popup properties
      var marginLeft = ($this.innerWidth() - $popup.innerWidth()) / 2;
      // .popup init
      $popup.css({
        opacity: 0,
        top: offsetDataTop - 40,
        left: offsetDataLeft + marginLeft
      }).animate({
        opacity: 1,
        marginTop: 20
      }, "fast");
    }
  }).on('mouseleave', '[data-popup]', function() {
      $(".popup").remove();
  })
});

.popup{
  position:absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="correction">
<br>
<br>
  <a href="#" data-popup="surpris">supri</a>
</div>

<div id="result"></div>