无法从由 Jquery 加载到另一个 html 的 HTML 中定位一个类答案

【问题标题】：Cannot target a class from HTML that's loaded into another html by Jquery无法从由 Jquery 加载到另一个 html 的 HTML 中定位一个类
【发布时间】：2016-10-07 03:26:29
【问题描述】：

有没有人尝试过 html jquery 加载文件？我怎么可能使用 Jquery 来控制从 Jquery 加载的 Html 中的类？如果插入到 index.html 中，我的标题 html 的直接内容将起作用。但是我正在尝试使用 Jquery 包含文件，因为会有很多页面，所以单独的文件更可行。问题是当我在 js 中针对某个类或 id 时，它不会做任何事情。

index.html

<!DOCTYPE html>
<html>
<body>
<div id="header"></div>
<div id="slides">  
  <ul class="slides-container">
    <li>
      <img src="img/site_images/bg_home01.jpg" alt="">
      <div class="caption">
      <div class="title_pre">Development</div>
      <h1>The City Below<br>The life above</h1>
      <p><a><i class="icon-play"></i>Play Video</a></p>
      </div>
    </li>
  </ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/vendor/foundation.js"></script>
<script src="js/jquery.superslides.js" type="text/javascript" charset="utf-8">        </script>
<script src="js/app.js"></script>
<script> 
$(function(){
$("#header").load("header.html"); 
});
</script> 
</body>
</html>

header.html

<header>
    <a href="#" class="pull">Menu</a>
    <div class="navlogo">
       <a href=""><img src="http://placehold.it/150x40"></a>      
    </div>
</header>

app.js

$(document).foundation();
$(".navlogo").fadeOut();

【问题讨论】：

问题可能是，您首先加载 app.js，然后加载 header.html。尝试将<script src="js/app.js"></script> 放在页脚中，并在document.ready 上加载app.js 的内容。

标签： javascript jquery html css include

【解决方案1】：

设法用不同的方法修复。

index.html

<!DOCTYPE html>
<html>
<link rel="import" id="template-file" href="header.html">
<body>
    <script>
    var getImport  = document.querySelector('#template-file');
    var getContent = getImport.import.querySelector('#header');
      document.body.appendChild(document.importNode(getContent, true));
    </script>
<div id="slides">  
  <ul class="slides-container">
    <li>
      <img src="img/site_images/bg_home01.jpg" alt="">
      <div class="caption">
      <div class="title_pre">Development</div>
      <h1>The City Below<br>The life above</h1>
      <p><a><i class="icon-play"></i>Play Video</a></p>
      </div>
    </li>
  </ul>
</div>
</div>
<script src="js/vendor/jquery.js"></script>
<script src="js/app.js"></script>
</body>
</html>

header.html

<header id="header">
<a href="#" class="pull">Menu</a>
<div class="navlogo">
   <a href=""><img src="http://placehold.it/150x40"></a>      
</div>
</header>

app.js

$(document).foundation();
$(".navlogo").fadeOut();

【讨论】：