jquery - Keep bootstrap3 popover alive while the popover is being hovered when content reloaded?

Question

I'm trying to keep Bootstrap3 popovers alive while the popovers is being hovered. I'm using the JQuery code bellow suggested in OkezieE's answer from this thread, and its working fine for standard use:

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

However, I have a sorting function that reloads the content using Ajax, and after the content is reloaded the popovers will not trigger. Anyone have a solution for that?

Answer 1

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

如果提供了选择器，弹出框对象将被委托给指定的目标。在实践中，这用于启用动态 HTML 内容以添加弹出框。请参阅this和一个信息性示例。

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