jquery + AJAX停止工作 - 你能发现问题吗？

Question

我是相当新的JavaScript/jquery/ajax，所以我怀疑这个问题是我没有看到一些错字。它工作正常，但在编辑过程中，hide（）+ show（）方法停止工作（在Firefox + Chrome中测试它）。我已经多次赞扬它，看不出有什么问题。

的script.js

$(document).ready(function(){ 

    $('p').click(function() { 
     $(this).hide(); 
    }) 

    $('#nav li a').click(function(){ 
     var toLoad = $(this).attr('href')+' #content'; 

     $('#content').hide('fast',loadContent); 

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

     function showNewContent() { 
       $('#content').show('normal'); 
     } 
     return false; 
    }); 
}); 

在我的index.html页面下面的脚本包含在该节：

<script src="script.js"></script> 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 

任何提示非常感谢。 -David

Answer 1

您需要在之前包含jQuery 您的script.js。

JavaScript代码被同步执行。在你的例子中，$是（或至少应该是）undefined，当然undefined没有类似jQuery的方法。

此外，您的回调之一定义为showNewContent()。最后的括号将调用该函数并将其结果作为回调传递回来，这在此情况下不是您想要的。

相反，请删除()以仅传递该函数的引用。

Answer 2

您的index.html东西更改为

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 
<script src="script.js"></script> 

和你的代码中的script.js到：

$(document).ready(function(){ 

    $('p').click(function() { 
    $(this).hide(); 
    }) 

    $('#nav li a').click(function(){ 
    var toLoad, loadContent, showNewContent; //keep the variable scope local 
    toLoad = $(this).attr('href')+' #content'; 


    $('#content').hide('fast',loadContent); 

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

    showNewContent = function() { 
      $('#content').show('normal'); 
    } 
    return false; 
    }); 
});