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

问题描述 投票：0回答：1

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

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

这给出以下输出：enter image description here

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

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

它给了我以下输出：enter image description here

正在删除+手风琴。如果html和jQuery代码都相同，则它应与html加载相同，但不会加载。请帮助我解决自2天以来我一直在苦苦挣扎的问题。

预先感谢。

P.S：我已经尝试过使用jQuery中的var el=..

这里是JSFiddle

jquery html css append styles
1个回答
0
投票

您的标记有点不对，您需要致电$('#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>
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.