如何让所有Javascript处理使用JQuery .load（）加载的html部分

Question

我有一个index.html页面，然后是另外两个.html文件，它们使用JQuery .load（）函数加载到index.html各自的div中。

每个文件中都有使用不同源文件的不同脚本的内容。 我将它们全部包含在index.html但是来自两个不同.html文件的部分中的Javascript不起作用。

如果我将所有<script src>添加到另外两个.html文件中; 页面运行速度非常慢，即便如此，这些部分的Javascript也无法正常运行。

所以我的问题是，是否有办法让所有脚本和源文件在任何地方都能正常工作。

如果这些脚本只是插入到index.html并且index.html包含所有脚本src，为什么这些脚本不能用于这些加载的部分呢？

谢谢

Answer 1

我试图重现你的问题。 这是如下

index.html->在id（1,2）的相应div中加载两个html文件

<!DOCTYPE html>
<html>

<head>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  <link rel="stylesheet" href="style.css">
  <script src="script.js"></script>
</head>

<body>
  <h1>Hello Plunker!</h1>
  <div id="1"></div>
  <div id="2"></div>

  <script>
    $('#1').load("load1.html"); //load html
    $('#2').load("load2.html"); //load html
  </script>
</body>

</html>

load1.html

<button onclick="function11()">Load11(function 1)</button>
<button onclick="function12()">Load12(function 2)</button>

<script src="script1.js"></script>
<script src="script2.js"></script>

这包含两个具有相应功能的外部脚本

load2.html

<button onclick="function21()">Load21(function 1)</button>
<button onclick="function22()">Load22(function 2)</button>

<script src="script3.js"></script>
<script src="script4.js"></script>

与上述相同

这里在index.html页面中加载了两个外部文件（load1.html，load2.html）。这两个文件包含在其外部脚本文件中定义了click函数的按钮。 所有都在index.html中加载，每个单击都正在执行。

用于预览的Plunker链接

如何让所有Javascript处理使用JQuery .load（）加载的html部分

问题描述

1 个解决方案

解决方案1
0 2017-02-18 09:05:33

如何让所有Javascript处理使用JQuery .load（）加载的html部分

问题描述

1 个解决方案

解决方案1 0 2017-02-18 09:05:33

解决方案1
0 2017-02-18 09:05:33