почему стили и код javascripts не применяются к новому добавленному html-контенту

Question

Я запрашиваю на сервере ajax и получаю в ответ какой-то HTML-код Я получаю его и добавляю в div, который имеет id = 'conten', но стили и сценарии не применяются

Это мой запрос на ajax:

  <li class="catalogs"  catalog_id="<?= $category->id?>"><?= $category->title?></li>

это мой пост Ajax:

//get catalogs
        $('.catalogs').click(function () {
            let catalog_id = this.getAttribute('catalog_id')
            console.log(catalog_id)

            $.ajax({

                url: '/site/catalog',
                type: 'get',
                data: {
                    id: catalog_id
                }
            }).done(function (response) {
                $('#conten').html(response);
            })

        })

это мое действие в SiteController

    public function actionCatalog($id)
    {
        $products = \common\models\Product::find()->where(['category_id' => $id]);
        $subCategories = \common\models\SubCategory::findAll(['category_id' => $id]);
        return $this->renderAjax('index',[
            'products' => $products,
            'subCategories' => $subCategories,
        ]);
    }

и это мой div с id = "conten"

 <div id="conten">
     <?= $content?>
 </div>

мои файлы AppAssets

// css
'css/plugins.css',
        'css/style.css',
        'css/responsive.css'
//js

'js/jquery.js',
        'js/plugins.js',
        'js/functions.js'

Answer 1

Вы загружаете свои JS и CSS с помощью ajax?если это так, то это потому, что ваша html-страница, куда вы включаете все CSS, загружается, когда документ готов ... он читает все классы и в соответствии с таблицей стилей, которая применяется к этому .. но в ajax мы загружаем другую страницу ната же html-страница и браузер на этот раз не отображают html-классы в таблицу стилей, поэтому ваш CSS не применяется к этому.

Есть два способа сделать это - встроенный css, а другой - загрузить всеснова файлы css после загрузки страницы ajax .. вы можете сделать это с помощью jquery или javascript.

Вот пример: Есть ли простой способ перезагрузить css без перезагрузки страницы?