为什么我的自定义函数不能工作？

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() {...} 

之后文档已准备就绪（基本上当页面完全加载时，它有点不同，但在此处阐述并不具有建设性）。