Question

我是jquery的新手，甚至不能假设这个问题有多深。当外部页面（在本例中为shop.php）被加载到index.php中时，由Jquery函数.load（）;它崩溃了。应用于shop.php页面的许多jquery命令和插件都不起作用。这让我很困惑，因为一些js命令和插件仍然有效。显然我不能说文件没有完全加载，只是大多数文件没有工作。

当我将shop.php内容粘贴到index.php时，它完美无缺。此外，当我将所需的js代码添加到shop.php（包装到脚本标签中）时，它也能正常工作。

我真的不希望任何人深入研究这个问题。我只是想知道这是否是常见问题，是否有简单的解释？如果不是，我会寻求一些不同的方法。

我的代码：

的index.php

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/jquery-ui-1.10.4.min.css">
    <script type="text/javascript" src="js/jquery-1.10.2.js"></script>
    <script type="text/javascript" src="js/jquery-ui-1.10.4.min.js"></script>
    <script type="text/javascript" src="js/shop.js"></script>
    <script type="text/javascript" src="js/jquery.touchcarousel-1.2.js"></script>
    <script type="text/javascript" src="js/jquery.themepunch.revolution.min.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
    <script type="text/javascript" src="js/jquery.ddslick.js"></script>
    <script type="text/javascript" src="js/top-navigation.js"></script>

</head>
<body>
<div id="top-bar"><?php include("top-bar.php"); ?></div>

<div id="pageWraper"><?php include("home.php"); ?></div>



</body>

</html>

顶bar.php

<div id="nav">
<ul id="navigationWraper">
    <li><a href="home.php" class="menuLink">Home</a></li>
    <li><a href="#" class="menuLink">About Us</a></li>
    <li><a href="#" class="menuLink">Services</a></li>
    <ul class="submenu">
        <li>asdasd</li>
        <li>asdasdas</li>
        <li>derwer</li>
    </ul>
    <li><a href="shop.php" class="menuLink">Shop</a></li>
    <li><a href="#" class="menuLink">Portfolio</a></li>
    <li><a href="#" class="menuLink">Gallery</a></li>
    <li><a href="#" class="menuLink">Contact Us</a></li>
</ul>
</div>

shop.php

<div id="shop">
<div id="shopheader">
  <div id="shopitemstop">
    <div id="productcat">

          <!-- bunch of code -->

     </div>
   </div>
 </div>
</div>

Jquery的：

$(document).ready(function(){

$(function() {
    $("a.menuLink").on("click", function(e) {
        e.preventDefault();
        $("#pageWraper").load(this.href);

    });
});

});

希望这有帮助

谢谢，

更新：

我补充说：

<script type="text/javascript">
$(document).ready(function(){
    $.getScript("js/shop.js");
    $.getScript("js/jquery.touchcarousel-1.2.js");
    $.getScript("js/main.js");

});
</script>

在shop.php页面上，不知道这是对的，但现在正在工作。唯一让我烦恼的是如果我从index.php头部删除jquery.touchcarousel-1.2.js，页面就会崩溃。它就像是，只有在它们都被加载时才能工作????

Answer 1

<强>问题：

我真的不希望任何人深入研究这个问题。一世只是想知道这是否是常见问题，并且很简单对它的解释？

<强>答案：

是的，这是Ajax /动态加载内容的常见问题。

原因是：大多数插件都在DOM 上运行，因为它在运行插件时存在（除非它们专门用于处理动态内容）。

修正案包括：

找到另一个容忍动态内容的插件
重新运行插件
删除现有的插件并重新运行插件（需要花些精力找出一些插件）
不要为不支持它的插件动态加载内容

js在由jquery .load（）加载的页面上无法正常工作

1 个答案: