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

回答

相關問題