为什么样式和 javascripts 代码不适用于新添加的 html 内容

Question

我使用 ajax 向服务器请求并获得一些 HTML 代码的响应。我得到它并添加到具有 id='conten' 但样式和脚本不适用的 div

这是我的 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,
        ]);
    }

这是我的 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

您使用 ajax 加载 JS 和 CSS？如果是这样，这是因为包含所有 css 的 html 页面在文档准备就绪时被加载..它读取所有类并根据它应用的样式表..但是在 ajax 中，我们将另一个页面加载到相同的 html 页面，这次浏览器没有将 html 类映射到样式表，这就是为什么您的 css 不适用于该样式表的原因。

有两种方法可以做到这一点，一种是内联 css，另一种是在加载 ajax 页面后再次加载所有 css 文件。你可以通过 jquery 或 javascript 来完成。

这是一个例子： Is there an easy way to reload css without reloading the page?