如何將$（document）.click事件添加到插件？

Question

在我的自定義插件中添加$（document）.click事件的正確位置在哪裏？

(function ($) { 

    $.fn.greenify = function(options) { 



     $(document).click(function (event) { // where do I add this? 


     alert('this id was clicked'); 

     }); 




     // This is the easiest way to have default options. 
     var settings = $.extend({ 
      // These are the defaults. 
      color: "#556b2f", 
      backgroundColor: "white" 
     }, options); 

     // Greenify the collection based on the settings variable. 
     return this.css({ 
      color: settings.color, 
      backgroundColor: settings.backgroundColor 
     }); 

    }; 

}(jQuery)); 



$('#a,#b,#c').greenify({ 
     // My settings goes here 
    }); 

Answer 1

如果你不介意$(selector).greenify()被稱爲是，你可以把它與你的插件聲明：

;(function($){ 
    $(function(){ 
    $(document).click(function(){ 
     alert('hello, world! (from greenify)'); 
    }); 
    }); 
    $.fn.extend({ 
    greenify: function(opts){ 
     // continue with plugin 
    } 
    }); 
})(jQuery); 

請記住，不管是否使用.greenify，這個點擊事件都會被綁定，並且li stenining。

，如果你想完成它，只有在使用.greenify，你可以這樣做：

;(function($){ 
    var greenifyClick = false; 
    $.fn.extend({ 
    greenify: function(opts){ 
     if (!greenifyClick){ 
     greenifyClick = $(document).click(function(){ 
      alert('hello, world! (from greenify)'); 
     }); 
     } 
     // continue with plugin 
    } 
    }); 
})(jQuery); 

這將使得其綁定如果/使用.greenify的時候，卻只有一次。

Answer 2

你正在攻擊這個錯誤。插件本身不應該等待文檔加載。

在您的腳本（不是插件）中，您準備好了文檔並在您喜歡時調用插件。始終讓用戶決定。插件本身應該儘可能流暢並且在用戶需要時可以調用。

插件

(function ($) { 
    $.fn.greenify = function(options) { 
     // This is the easiest way to have default options. 
     var settings = $.extend({ 
      // These are the defaults. 
      color: "#556b2f", 
      backgroundColor: "white" 
     }, options); 

     // Greenify the collection based on the settings variable. 
     return this.css({ 
      color: settings.color, 
      backgroundColor: settings.backgroundColor 
     }); 
    }; 
}(jQuery)); 

主要的js文件

$(document).click(function() { 
    $(elm).greenify({ 
     // My settings goes here 
    }); 
});