Question

我有以下代码，可以成功地将popover添加到动态元素中：

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事件中调用on方法。由于我需要覆盖动态元素（即在加载DOM后添加），我使用了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); });方法：

dicts

Answer 2

试试这个

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'
}).on("mouseenter", ".show-popover", function() {
    var _this = this;
    console.log("show")
    $(this).popover("show");
    $(".popover").on("mouseleave", function() {
        console.log("hide")
      $(_this).popover('hide');
    });
  }).on("mouseleave", ".show-popover", function() {
    var _this = this;
    setTimeout(function() {
      if (!$(".popover:hover").length) {
        console.log("time out")
        $(_this).popover("hide");
      }
    }, 300);
  });

popover是在body上构建的，因此$(".show-popover")无法触发.popover("hide/show")

您需要将鼠标事件绑定到正文以使其触发正确的DOM对象

如何在徘徊时保持popover活着[动态元素]

2 个答案: