(Добавлен Fiddler) jQuery append не загружает стили должным образом - PullRequest
Новая
       5

(Добавлен Fiddler) jQuery append не загружает стили должным образом

0 голосов
/ 25 февраля 2020

Когда я пытался загрузить тег 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 дня.

Заранее спасибо.

PS: я пробовал без var el=.. в jQuery

Вот JSFiddle

1 Ответ

1 голос
/ 27 февраля 2020

Ваши наценки были немного неправильными, и вам нужно позвонить $('#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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...