javascript - 如何在悬停时让弹出窗口保持事件状态[对于动态元素]

Question

我有以下代码可以成功地将弹出窗口添加到动态元素:

var selection = "http://www.google.com/images/srpr/logo3w.png";
var image = '<img src="' + selection + '" />';
var previewLink = '<a class="show-popover" href="#" rel="popover" >(Hover to Preview)    </a>';

$('#headerBlock').append(previewLink);

$('body').popover({
     selector: '.show-popover',
     title: 'test',
     content: image,
     trigger: 'hover'
});

但是，我无法在悬停时让弹出窗口保持事件状态。下面是我的代码，但它不起作用:

$(".show-popover").popover({
     trigger: "manual",
     html: true,
     animation: false
  })
  .on("mouseenter", function() {
     var _this = this;
     $(this).popover("show");
     $(".popover").on("mouseleave", function() {
         $(_this).popover('hide');
     });
 }).on("mouseleave", function() {
    var _this = this;
    setTimeout(function() {
       if (!$(".popover:hover").length) {
           $(_this).popover("hide");
       }
    }, 300);
});

这是 JSFIDDLE:http://jsfiddle.net/KAvAZ/124/

有什么帮助吗？

Answer 1

这是我对这个问题的回答(我希望有一天它能对其他人有所帮助):http://jsfiddle.net/KAvAZ/127/

我需要做的是在应该显示弹出窗口的链接的 mouseenter 事件中调用 popover 方法。由于我需要覆盖动态元素(即在 DOM 加载后添加)，我使用了 on 方法:

    var selection = "http://www.google.com/images/srpr/logo3w.png";
    var image = '<img src="' + selection + '" />';
    var previewLink = '<a class="show-popover" href="#" rel="popover" >(Hover to Preview)    </a>';
    $('#headerBlock').append(previewLink);


    $('body').on("mouseenter", '.show-popover', function() {
      var _this = this;

      $(this).popover({
        html: true,
        content: function() {
          return "Content";
        },
        title: function() {
          return "Title";
        }
      });

      $(this).popover("show");
      $(".popover").on("mouseleave", function() {
        $(_this).popover('hide');
      });
    }).on("mouseleave", function() {
      var _this = this;
      setTimeout(function() {
        if (!$(".popover:hover").length) {
          $(_this).popover("hide");
        }
      }, 300);
    });