（添加提琴手）jQuery 追加未正确加载样式答案

【问题标题】：(Fiddler Added) jQuery append is not loading Styles properly（添加提琴手）jQuery 追加未正确加载样式
【发布时间】：2020-06-09 13:07:14
【问题描述】：

当我尝试通过.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);

它给了我以下输出：

它正在删除+accordian。如果html 和jQuery 代码相同，则它应该与html 加载相同，但它不会加载它。请帮我解决这个问题，我从 2 天以来一直在苦苦挣扎。

提前致谢。

P.S : 我试过在 jQuery 中不使用 var el=..

这里是JSFiddle

【问题讨论】：

手风琴的 CSS 在哪里？你在用插件吗？
尝试不将div转换为jquery对象，直接写var el = '<div class="...">...</div>'
应该是var el = '<div class="row accordion......" >'，而不是var el = $(' <div class="row accordion......>，对吧？
@AkhilAravind 无论哪种方式都可以。
@Barmar 哦，太好了。我已经好几年没有使用 jquery了。

标签： jquery html css append styles

【解决方案1】：

您的标记有点错误，您需要致电$('#year-2020').append(el).accordion("refresh"); 重新启动手风琴。检查 sn-p 以获取工作演示。全屏查看 sn-p。有一个选项可以在顶角切换到全屏。

如果您有任何问题，请留言:)

 $(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>

【讨论】：

谢谢阿基尔！！！你拯救了我的一天。标签也有“刷新”吗？
我不知道，也许你应该看看它。我刚刚快速浏览了文档并找到了此修复程序。