爲什麼我的自定義函數不能工作？

Question

創造我自己的jQuery方法時，爲什麼這項工作：

(function($){ 
    $.fn.test = function() { 
     return this.each(function(){ 
      $(this).html("Hi there"); 
     }); 
    } 
})(jQuery); 
$(document).ready(function(){ 
    $("body").click(function(){ 
     $(this).test().css("color", "orange"); 
    }); 
}); 

但是，這不？

(function($){ 
    $.fn.test = function() { 
     return this.each(function(){ 
      $(this).html("Hi there"); 
     }); 
    } 
    $("body").click(function(){ 
     $(this).test().css("color", "orange"); 
    }); 
})(jQuery); 

我試着更換$與jQuery，但它仍然無法正常工作。它似乎只在一個單獨的doc.ready函數內工作，任何人都可以解釋爲什麼？

謝謝！因爲

(function($) {...})(jQuery) 

是之前運行文檔準備好預期

Answer 1

你的第二個片段是行不通的。

通過包裝你的

$('body').click(function() {...}) 

內

$(document).ready(function() {...}) 

你告訴了jQuery在頁面加載後運行

$('body').click(function() {...}) 

。

---

什麼你（可能）想這樣做，而不是：

$(document).ready(function() { 
    $.fn.test = function() { 
     return this.each(function() { 
      $(this).html("Hi there"); 
     }); 
    } 
    $("body").click(function() { 
     $(this).test().css("color", "orange"); 
    }); 
}); 

這將同時運行

$.fn.test = function() {...} 

和

$("body").click(function() {...} 

之後文檔已準備就緒（基本上當頁面完全加載時，它有點不同，但在此處闡述並不具有建設性）。