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; 
    }); 
});