Question

我正在使用jquery .load（）加载.html内容，但是在.load（）函数加载后，javascript和css不会应用于one.html / two.html。

以下示例：

<head>
    <style> styles1 </style>
    <link href="stylesheets/style2.css" rel="stylesheet">
    <script src="script1.js">
    <script>     
        $(document).ready(function(){
           $("button.os").click(function(){
              fillmein = $(this).attr("target");
              fillmeinfile = $(this).attr("target")+'.html';
              $("."+fillmein).load("/contentfolder/"+fillmeinfile);
           });
        });

     ...
     other scripts
     ...
    </script>
</head>

<body>
   <p>the css and any js is applied to this block</p>
   <button class="os" target="one">replace</button>
   <div class="one">I will be replaced by one.html</div>
   <button class="os" target="two">replace</button>
   <div class="two">I will be replaced by two.html</div>
</body>

我知道在浏览器加载样式和javascript之后会加载one.html / two.html，但我如何将<head>中的样式和javascript应用于新加载的样式和javascript的.html / two.html？

我是jQuery的新手，所以让我知道如果需要我如何澄清。谢谢！

EDITED 感谢大家提供答案！更新了代码示例以阐明我的意思。

将<style>和<script>复制到one.html和two.html中，但如果我加载javascript两次，则可能会发生冲突。例如，具有搜索$（文档）的逻辑，并且可以多次调用折叠和展开节的函数。是否可以让主页中加载的js和css处理新加载的.html文件，或者有任何干净和干燥的方法来执行此操作？

Answer 1

正如Arun P Johny在评论中提出的那样

您只需将CSS内联到目标文档上，它就会自动与内容一起加载。

Answer 2

你可以写

$('button').on('click','Classname',function(){
  //write your structure here
  })

这适用于'Classname'的所有标记，这些标记已存在，或稍后会添加动态。

如何将加载的javascript和css应用于.load（）内容？

2 个答案: