如何将一些html代码加载到<div>中,但是保留原始页面的css和js?

时间:2017-06-12 08:11:36

标签: javascript jquery html css

我尝试使用带有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>

1 个答案:

答案 0 :(得分:0)

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