在内容重新加载时，在悬停弹出框时保持bootstrap3弹出框处于活动状态？

Question

我正在尝试保持Bootstrap3 popovers的活动状态，同时popovers被悬停。我使用的是OkezieE在这个thread的答案中建议的JQuery代码，它在标准使用下工作得很好：

 $(".pop").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);
});

但是，我有一个使用Ajax重新加载内容的排序功能，并且在重新加载内容后不会触发弹出窗口。有人对此有解决方案吗？

Answer 1

试一试，它应该在任何带有选择器.pop的元素上创建一个弹出窗口，即使是在DOM加载之后加载的元素。

如果提供了选择器，则将popover对象委托给指定的目标。在实践中，这用于使动态HTML内容能够添加弹出窗口。请看这里和一个内容丰富的示例。

$("body").popover({ selector: '.pop', 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);
});