Question

我有一个幻灯片，在DOM准备就绪时执行。

我有一个外部脚本，可以在导航中点击链接时从其他页面加载内容。

嗯，幻灯片的效果就像一个魅力，但当你点击一个链接？什么都没有。

如果我删除幻灯片脚本，即使我在本地测试，我的AJAX也像魅力一样。但是当我同时运行两个脚本时，我的AJAX失败了。

这是HTML：

<!DOCTYPE HTML>

<html lang="en">
<head>
   <meta charset="utf-8" />
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

   <!-- [if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->

   <!--[if IE]><![endif]-->

   <link rel="stylesheet" href="css/site-styles.css" />

   <!-- referencing latest version of jquery library -->
   <script src="http://code.jquery.com/jquery-latest.min.js" charset="utf-8"></script>

   <!-- referencing local js file -->
   <script src="js/scripts.js" type="text/javascript" charset="utf-8"></script>

   <!-- referencing cross-slide plugin -->
   <script type="text/javascript" src="js/jquery.cross-slide.min.js"></script>

</head>

<body>
        <div id="container">
            <header>
                <img src="img/parlorLogo.png" width="260" height="43" />
            <h4><a href="">To make a reservation, click here</a></h4>
            </header>

    <div id="contentBox">
        <div id="theContent">
            <script>
              $(function() {
                $('#contentBox').crossSlide({
                  sleep: 2,
                  fade: 1,
                  loop: 1
                }, [
                  { src: 'img/intro1.jpg' },
                  { src: 'img/intro2.jpg' },
                  { src: 'img/intro3.jpg' },
                  { src: 'img/intro4.jpg' },
                  { src: 'img/intro5.jpg' },
                  { src: 'img/intro6.jpg' },
                  { src: 'img/intro7.jpg' },
                  { src: 'img/intro8.jpg' },
                  { src: 'img/intro9.jpg' },
                  { src: 'img/intro10.jpg' },
                  { src: 'img/homeBG.jpg' },
                  { src: 'img/ticker.png' }
                ]);
              });
            </script>
        </div> <!-- theContent -->
        <noscript>Sorry, but you must enable JavaScript to view this site.</noscript>
    </div> <!-- contentBox -->

    <div class="ws_shadow"></div>
    <nav>
        <ul id="mainNav">
            <li>
                <h3>
                    <a href="index.html">HOME</a>
                </h3>
            </li>
            <li>
                <h3>
                    <a href="about.html">ABOUT</a>
                </h3>
            </li>
            <li>
                <h3>
                    <a href="photos.html">PHOTOS</a>
                </h3>
            </li>
            <li>
                <h3>
                    <a href="menu.html">MENU</a>
                </h3>
            </li>
            <li>
                <h3>
                    <a href="press.html">PRESS</a>
                </h3>
            </li>
            <li>
                <h3>
                    <a href="privateDining.html">PRIVATE&nbsp;DINING</a>
                </h3>
            </li>
            <li>
                <h3>
                    <a href="contact.html">CONTACT</a>
                </h3>
            </li>
        </ul>
    </nav>
</div> <!-- end container -->
</body>
</html>

外部脚本......

$(document).ready(function() {

$('#mainNav a').click(function(){

var toLoad = $(this).attr('href')+' #theContent';
$('#theContent').hide('fast',loadContent);

function loadContent() {
    $('#theContent').load(toLoad,'',showNewContent())
}
function showNewContent() {
    $('#theContent').show('fast');
}

return false;

});
});

有人可以帮助我吗？

非常感谢，

亚当

Answer 1

在您的HTML中，您有：

<div id="theContent">
    <script>
        $(function() {
            $('#contentBox').crossSlide({

在你的外部脚本中，你有这个：

function loadContent() {
    $('#theContent').load(toLoad,'',showNewContent())
}

因此，当您使用#theContent调用替换load的内容时，您的外部脚本会在您的HTML中消除内联的JavaScript。

尝试将内联JavaScript移到<div id="theContent">之外。

此外，从评论中，您没有通过服务器运行任何此类操作。 AJAX调用（例如.load）通常不能与本地文件系统一起使用以应对安全问题。因此，如果您需要测试AJAX，请设置Web服务器。

最后，问题的最可能来源（我真的应该立即发现）：

function loadContent() {
    $('#theContent').load(toLoad,'',showNewContent())
    //--------------------------------------------^^
}

load函数需要一个函数作为回调，但你执行 showNewContent函数并将其返回值作为回调。您的loadContent应如下所示：

function loadContent() {
    $('#theContent').load(toLoad,showNewContent)
}

我也删除了空字符串data参数，你不需要它。

Answer 2

在您的代码中，我注意到您正在使用html5启用脚本。首先看看这里的评论：

http://remysharp.com/2009/01/07/html5-enabling-script/

在调用初始jquery.js脚本之后调用html5.js脚本

我最近在ie7＆amp ;;中使用AJAX的jquery脚本遇到了一些问题。 ie8 only。将带有文本“div”的div附加到html主体的奇怪行为。 删除html5 shiv解决了问题，因此可能存在某种冲突。

Answer 3

尝试将crossSlide代码放在$（document）.ready。

中

两个冲突的jQuery脚本，只有一个会工作

3 个答案: