Javascript jQuery如何使用来自外部源的DOM对象_Javascript_Jquery_Html

Javascript jQuery如何使用来自外部源的DOM对象

javascript jquery html

Javascript jQuery如何使用来自外部源的DOM对象,javascript,jquery,html,Javascript,Jquery,Html,我有以下源代码树： source |-html | |-div1.html | |_div2.html |-js | |_bundle.js |_index.html 我的index.html如下所示： <!DOCTYPE html> <html> <head> <script type="text/ecmascript" src="./js/bundle.js"></script> <script s

我有以下源代码树：

source
|-html
|  |-div1.html
|  |_div2.html
|-js
|  |_bundle.js
|_index.html

我的

index.html

如下所示：

<!DOCTYPE html>
<html>
  <head>
    <script type="text/ecmascript" src="./js/bundle.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  </head>
  <body>
    <div id="div1"></div>
    <div id="div2"></div>
    <script>
      $(document).ready(function(e){
        $('#div1').load('./html/div1.html');
      });
      $(document).ready(function(e){
        $('#div2').load('./html/div2.html');
      });
    </script>
  </body>
</html>

首先要注意的是，id必须是唯一的，因为这两个文件都有相同的HTML

一旦成功加载，就可以像访问任何其他DOM元素一样访问这些元素

$("#tParagraph")

为了确保它已加载，必须使用回调

 $('#div2').load('./html/div2.html', function(){

  // loaded.
});

把它们放在一起

$('#div2').load('./html/div2.html', function(){
   $("#tParagraph").dosomeThing();
});

$（“#div1#tParagraph”）？

$('#div2').load('./html/div2.html', function(){
   $("#tParagraph").dosomeThing();
});