（已添加 Fiddler）jQuery append 未正确加载样式

Question

当我尝试通过 .append() 方法加载 div 标签时，它没有正确加载样式。这是我试过的代码：

 <section id="year-2020" class="tab-panel">
 <div class="row accordion">
                    <header>
                        <h3>2019 4th Quarter and Annual Results Conference Call</h3>
                        <p>February 27, 2020</p>
                    </header>
                    <ul>
                        <li>
                            <a href="http://services.choruscall.ca/links/husky20191202.html" target="_blank">
                                <strong>4th Quarter Conference Call</strong>
                            </a>
                        </li>

                        <li>
                            <a href="/downloads/InvestorRelations/2020/2020GuidanceChart.pdf" target="_blank"><strong>2020 Guidance Chart</strong> (PDF)</a>
                        </li>

                    </ul>
                </div>
  </section>

给出以下输出：

当我尝试通过 .append() 添加相同的 div 时，如下所示：

 var el = $('  <div class="row accordion ui-accordion ui-widget ui-helper-reset"><header><h3>2019 4th Quarter and Annual Results Conference Call</h3><p>February 27, 2020</p></header><ul><li><a href="http://services.choruscall.ca/links/husky20191202.html" target="_blank">   <strong>4th Quarter Conference Call</strong></a></li><li><a href="/downloads/InvestorRelations/2020/2020GuidanceChart.pdf" target="_blank"><strong>2020 Guidance Chart</strong> (PDF)</a></li></ul></div>');
        $('#year-2020').append(el);

它给了我以下输出：

它正在删除 + 手风琴。如果 html 和 jQuery 代码相同，那么它应该加载与 html 相同的代码，但是它不会加载那个。请帮我解决这个困扰我 2 天的问题。

提前致谢。

P.S ：我已经尝试在 jQuery

中使用 var el=..

这是JSFiddle

Answer 1

您的标记有点错误，您需要调用 $('#year-2020').append(el).accordion("refresh"); 来重新初始化手风琴。检查工作演示的片段。全屏查看片段。在顶角有一个切换到全屏的选项。

如有任何问题请留言:)

 $(document).ready(function() {
 $('#year-2020').accordion({active: false,
collapsible: true});
   $('#click').click(function() {
   
     var el =`<header><h3>2019 4th Quarter and Annual Results Conference Call</h3><p>February 27, 2020</p></header><ul><li><a href="http://services.choruscall.ca/links/husky20191202.html" target="_blank">   <strong>4th Quarter Conference Call</strong></a></li><li><a href="/downloads/InvestorRelations/2020/2020GuidanceChart.pdf" target="_blank"><strong>2020 Guidance Chart</strong> (PDF)</a></li></ul>`;
     $('#year-2020').append(el).accordion("refresh"); 
   })
 })

<!doctype html>
<html>

<head>
    <link rel="stylesheet" href="https://huskyenergy.com/library/css/global.css">
    <link rel="stylesheet" href="https://huskyenergy.com/library/css/print.css" media="print">
    <link rel="stylesheet" href="https://huskyenergy.com/library/css/magnific-popup.css">
    <link rel="shortcut icon" href="https://huskyenergy.com/favicon.ico">
    <script src="https://huskyenergy.com/library/js/jquery.js"></script>
    <script src="https://huskyenergy.com/library/js/jquery-ui-custom.js"></script>
    <script src="https://huskyenergy.com/library/js/jquery.magnific-popup.js"></script>
    <script src="https://huskyenergy.com/library/js/utility.js"></script>
    <script src="https://huskyenergy.com/library/js/global.js"></script>
    <script src="https://huskyenergy.com/library/js/typeahead.bundle.min.js"></script>
    <title>Conference Calls &amp; Presentations - Husky Energy</title>
</head>

<body>
    <div class="content-width page-header-bar">
        <div class="page-header">
            <a href="default.asp">Investors</a> /
            <h1 class="current-page">Conference Calls &amp; Presentations</h1>
        </div>
    </div>
    <div class="content-width">
        <article class="article-width">
            <div class="tabs">
                <input type="button" value="Click" id="click" />
                <h3>
                    Click Here to Add one more Accordian!!!!!!!!
                </h3>
                <ul class="years">
                    <li><a href="#year-2020">2020</a></li>
                    <li><a href="#year-2019">2019</a></li>
                    <li><a href="#year-2018">2018</a></li>
                    <li><a href="#year-2017">2017</a></li>
                    <li><a href="#year-2016">2016</a></li>
                    <li><a href="#year-2015">2015</a></li>
                    <li><a href="#year-2014">2014</a></li>
                    <li><a href="#year-2013">2013</a></li>
                    <li><a href="#year-2012">2012</a></li>
                    <li><a href="#year-2011">2011</a></li>
                    <li><a href="#year-2010">2010</a></li>
                </ul>
                <section id="year-2020" class="tab-panel">
                        <header>
                            <h3>2019 4th Quarter and Annual Results Conference Call</h3>
                            <p>February 27, 2020</p>
                        </header>
                        <ul>
                            <li>
                                <a href="http://services.choruscall.ca/links/husky20191202.html" target="_blank">
                                    <strong>4th Quarter Conference Call</strong>
                                </a>
                            </li>
                            <li>
                                <a href="/downloads/InvestorRelations/2020/2020GuidanceChart.pdf"
                                    target="_blank"><strong>2020 Guidance Chart</strong> (PDF)</a>
                            </li>
                        </ul>
                </section>
            </div>
            <!--tabs --> <a href="https://cs.globenewswire.com/NewsArchive/View/32RYhiCdPkN2Sw1zwhvuZA==?iFrame=true"
                class="subscribe-enotify action-link" target="_blank">Subscribe to E-Notify</a>
        </article>
    </div>
</body>

</html>

（已添加 Fiddler）jQuery append 未正确加载样式

(Fiddler Added) jQuery append is not loading Styles properly

html

css

jquery

styles

append