如何将一些 html 代码加载到 <div> 中但维护原始页面的 css 和 js？答案

【问题标题】：How can I load some html code into a <div> but mantaining the css and js of the original page?如何将一些 html 代码加载到 <div> 中但维护原始页面的 css 和 js？
【发布时间】：2017-06-12 16:27:37
【问题描述】：

我尝试使用带有 jQuery 的 load(url) 从外部文件加载 html，但是当我这样做时，例如：

$('#body-content').load('admin/users/partials/settings.php')

div #body-content 不显示页面的css样式和js文件。

JAVASCRIPT：

 $(document).ready(function() {
  $('#button-example').on('click', function() {
    $('#body-content').load('<button type="button" name="button" class="submit-btn">Button from external html</button>');
  });
});

CSS（来自原始页面）styles.css：

.submit-btn {
      background: #00f;
    }

HTML 代码：

<!DOCTYPE html>
    <html lang="es">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Website</title>

        <!--Styles-->
        <link rel="stylesheet" href="assets/css/styles.css">
    </head>
    <body>
        <div id="body-content">
            <section>
                <div class="article-container">
                    <article>
                        <h1>Title of the Article</h1>
                        <hr>
                            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet placeat nostrum voluptatem aliquid!
                            Perspiciatis soluta minus ipsa ex. </p>
                    </article>
                    <button id="button-example" type="button" name="button">Change content</button>
                </div>
            </section>
        </div>
    </body>

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

我认为你没有在任何地方加载 css 和 js 文件。您确定已在尝试使用 jquery 加载的文件中包含 js 和 css 文件吗？

【讨论】：

谢谢！我在原始页面的开头加载了css，在原始页面的末尾加载了js，然后我尝试加载一个包含一个部分的外部html。当我在我试图加载的文件上添加样式表和 js 时，它工作得很好，但我加载了两次，我试图做得更好。