Jqueryプラグインのパターンどこにクリックハンドラを配置するか

Question

私はいくつかのクリックイベントがあるWebアプリケーションページを持っていますが、私は以下に示すjQueryプラグインパターンを適用しようとしています。

; (function ($, window, document, undefined) { 

    var Plugin = function (elem, options) { 
     this.elem = elem; 
     this.$elem = $(elem); 
     this.options = options; 
    }; 

    Plugin.prototype = { 
     defaults: { 
      message: 'This is message' 
     }, 

     init: function() { 
      this.config = $.extend({}, this.defaults, this.options); 
      var self = this; 
      this.selected = $('#selector'); 

      // IS THIS THE BEST PLACE TO PUT .click EVENT HANDLERS ?? 
      this.selected.on('click', function() { 
       console.log('this.selected clicked'); 
       self.sampleMethod(); 
      }); 

      this.sampleMethod(); 
      return this; 
     }, 

     sampleMethod: function() { 
      console.log('sampleMethod'); 
     }  
    }; 

    Plugin.defaults = Plugin.prototype.defaults; 

    $.fn.testPlugin = function (options) { 
     return this.each(function() { 
      new Plugin(this, options).init(); 
     }); 
    }; 

})(jQuery, window, document); 

私の質問は：私は、init関数内でクリックイベントハンドラを配置した（と彼らが働く）が、これはそれらを置くための正しいかつ堅牢な場所ですか？

これに関するお手伝いがあれば幸いです。

Answer 1

私は記事の一番下にあるコメントで答えをhttp://markdalgleish.com/2011/05/creating-highly-configurable-jquery-plugins/に見つけました。

"initメソッドの中で、あなたが必要とするイベントハンドリングロジックを設定することができます。 "

プラグインの外部からプラグイン関数を呼び出す方法についても説明している素敵な記事です。

誰かを助けてくれる場合は、記事を取り込み、jQueryプラグイン（通常はウェブページプラグイン）用にこのテンプレートを使用します。これは、Webページから呼び出されます（id要素を持つdivを使用してページhtmlをラップします）

$('#element').plugin_name({default_item: 'some default item'}); 


; (function ($, window, document, undefined) { 
    "use strict"; 

    var plugin_name_fn = function (elem, options) { 
     this.elem = elem; 
     this.elemObj = $(elem); 
     this.options = options; 
     this.metadata = this.elemObj.data('plugin-options'); 
    }; 

    plugin_name_fn.prototype = { 
     defaults: { 

      default_item: '' 

     }, 

     init: function() { 
      this.config = $.extend({}, this.defaults, this.options, this.metadata); 

      // Merge settings 
      this.default_item = this.config.default_item; 

      // Call event handlers 
      this.events(); 

      return this; 
     }, 

     thisFunction: function() { 

      // Do something here 

     }, 

     thatFunction: function (default_item) { 

      // Do something here with default_item 

     }, 

     events: function() { 

      var self = this; 
      // Events are declared and chained here 
      this.elemObj 
       .on('click', '#element_id', function (e) { 

        // Call thisFunction 
        self.thisFunction(); 

       }) 
       .on('change', '#another_element_id', function (e) { 

        // Call thisFunction using default_item 
        self.thatFunction(self.default_item); 

       }) 
      ; 

     } 

    }; 

    plugin_name_fn.defaults = plugin_name_fn.prototype.defaults; 

    $.fn.plugin_name = function (options) { 
     return this.each(function() { 
      new plugin_name_fn(this, options).init(); 
     }); 
    }; 

    //window.plugin_name_fn = plugin_name_fn; 

})(jQuery, window, document);