Two Conflicting jQuery Scripts, Only One Will Work_问答_开发者

I've got a slideshow that executes when the DOM is ready.

And I've got an external script that loads content from other pages when a link is clicked in the nav.

Well, the slideshow works like a charm, but when you click on a link? Nothing.

If I remove the slideshow script, my AJAX works like a charm, even when I'm testing locally. But when I run both scripts at the same time, my AJAX fails.

Here's the 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>

And the external script...

$(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;

});
});

Can anyone help me out here?

Thanks much,

Adam

In your HTML, you have this:

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

And in your external script, you have this:

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

So your external script will vaporize your inlined JavaScript in your HTML when it replaces the content of #theContent with the load call.

Try moving your inlined JavaScript outside the <div id="theContent">.

Also, from the comments, you're not running any of this through a server. AJAX calls, such as .load, generally don't work with the local file system to due security issues. So, if you need to test AJAX, set up a web server.

And, finally, the most likely source of your problem (which I really should have spotted right away):

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

The load function wants a function as the callback but you're executing the showNewContent function and leaving its return value as the callback. Your loadContent should look like this:

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

I dropped the empty string data argument too, you don't need it.

In your code I note you are using the html5 enabling script. First check out the comments here:

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

call the html5.js script AFTER you call the initial jquery.js script

I recently had some issues with a jquery script using AJAX in ie7 & ie8 only. Really odd behaviour of appending divs with the text "div" to the html body. Removing html5 shiv solved the problem, so there may be some sort of conflict.

Try putting the crossSlide code inside $(document).ready.