Question

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

我的问题是，如果我显示弹出窗口，隐藏弹出框并想要再次显示弹出框，则弹出框是空的。但是当我调试我的代码时，在popover的内容部分确定的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>

Answer 1

我创建了一个片段，让它变得简单易用。

//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');

});

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

jQuery popover不显示附加的html

1 个答案: