jQuery popover不显示附加html

我的popover有问题。因为我想避免ID冲突，所以当它显示在弹出窗口中时，我尝试从原始位置移除html代码。弹出窗口关闭/隐藏时，我将代码复制回原来的位置。jQuery 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>

来源

2017-02-24 Carsten Schmitt

添加您的HTML代码以及问题 – vatz88

对不起，我的坏。我已经添加了相关的html代码。 –

香港专业教育学院创建了一个片段得到它的工作很容易。

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

});

这也许你可以玩你的代码。

来源

2017-02-24 13:57:41 TriForce

jQuery popover不显示附加html

回答

相关问题