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，此点击事件都会受到约束和监听。

如果您只想在使用.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
    });
});

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

2 个答案: