jQuery popover 不显示附加的 html答案

【问题标题】：jQuery popover doesn't show appended htmljQuery popover 不显示附加的 html
【发布时间】：2017-02-24 21:57:41
【问题描述】：

我的弹出框有问题。因为我想避免 ID 冲突，所以当它显示在弹出窗口中时，我尝试将 html 代码从其原始位置删除。当弹出窗口关闭/隐藏时，我将代码复制回原来的位置。

我的问题是，如果我显示弹出框，隐藏弹出框并想再次显示弹出框，弹出框是空的。但是当我调试我的代码时，在弹出框的内容部分确定的 html 似乎是正确的。

这是我的代码：

 jQuery('.dashboard_popper_btn').popover({
    placement: 'bottom',
    container: 'body',
    html: true,
    template: '<div class="my-dashboard-popover popover">'+
                '<div class="arrow"></div>'+
                '<div class="popover-inner">'+
                '<h3 class="popover-title"></h3>'+
                '<div class="popover-content">'+
                '<p></p></div></div></div>',        
    content: function () {
        var html;
        var popoverContent  = jQuery(this).data("popoverContent");
        var currentPopper   = jQuery(this).parent().find('.popper-content'); 
        if (jQuery(currentPopper).length > 0) {
            html            = jQuery(currentPopper).html();
        }
        if (typeof html !== typeof undefined && html != "undefined") {
            jQuery(this).data("popoverContent", currentPopper);
            jQuery(currentPopper).remove();
        } else if (popoverContent != null) {
            html        = jQuery(popoverContent).html();
        }
        //html = jQuery.parseHTML(String(html));

        return html;
    }
}).on('hide.bs.popover', function() {
    var contentId       = "#"+jQuery(this).attr("aria-describedby");
    var currentPopover  = jQuery(contentId);
    var popoverContent  = jQuery(contentId).find(".popover-content");       
    jQuery(this).data("popoverContent", popoverContent);
}).on('hidden.bs.popover', function() {
    var parent          = jQuery(this).parent();
    var popoverContent = jQuery(this).data("popoverContent");
    jQuery(popoverContent).addClass("popper-content");
    jQuery(popoverContent).addClass("rsib_hide");
    jQuery(popoverContent).removeClass("popover-content");
    jQuery(popoverContent).appendTo(parent);
});

正如我所说，当我调试代码时，一切似乎都很好。重新插入代码后，甚至 HTML 看起来都很好。

遵循相关的 HTML 代码：

<div class="dashboard_filter_row">
<a class="dashboard_popper_btn" data-toggle="popover" data-original-title="" title="">Filter</a>
<div class="popper-content rsib_hide">
    <div class="ibfc_checkbox_table_dropdown_container">
        <div class="ibfc_checkbox_table_dropdown_button ibui_select ibui_select_popover_accordeon">
            Months 
            <div style="text-align: right; float: right; margin-right: 20px;">
                <input id="dashboard_check_all_months_3250558b0140595dc1" class="my_checkbox" type="checkbox">
            </div>
        </div>
        <div class="month_selection" style="display: none;">
            <ul>
                <li class="table_active_kz">
                    <input class="cb_months_dd_check_table_active ibfc_table_dropdop_checkbox" value="1" name="cb_months_dd_check_table_active" type="checkbox">
                    <span>Januar</span>
                </li>
                <li class="table_active_kz">
                    <input class="cb_months_dd_check_table_active ibfc_table_dropdop_checkbox" value="2" name="cb_months_dd_check_table_active" type="checkbox">
                    <span>Februar</span>
                </li>
                <li class="table_active_kz">
                    <input class="cb_months_dd_check_table_active ibfc_table_dropdop_checkbox" value="3" name="cb_months_dd_check_table_active" type="checkbox">
                    <span>März</span>
                </li>
                <!-- ... -->
            </ul>
        </div>
    </div>
</div>
</div>

【问题讨论】：

将您的 HTML 代码也添加到问题中
对不起，我的错。我已经添加了相关的html代码。

标签： javascript jquery html

【解决方案1】：

我创建了一个 sn-p 以使其轻松工作。

//Show on enter
$(document).on("mouseenter", ".MYCLASS", function() {

    $(this).popover({
        container: 'body',
        html: true,
        placement: 'bottom', //top,bottom,left,right
        content: function () {
            return '<b>My content</b>'; //HTML content
        }
    });

    $(this).popover('show');
});

//Remove after leave
$(document).on("mouseleave", ".MYCLASS", function() {

    $(this).popover('destroy');

});

有了这个也许你可以玩你的代码。

【讨论】：