如何在悬停时保持弹出框活着[对于动态元素]

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);
    });

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);
  });

弹窗是建立在body上的，所以$(".show-popover")不能触发.popover("hide/show")

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