jQuery插件如何添加事件？

Question

好的，所以我對jQuery插件遊戲很陌生，我做了大量的閱讀，看起來好像有2700萬種方法來編寫jQuery插件。我想在我的插件中使用最簡潔的方式來處理事件。

就拿這個基地插件模式：

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

    var pluginName = 'MyPlugin'; 
    var defaults = { 
      propertyName: "value" 
    }; 

    function Plugin(element, options) { 
      this.options = $.extend({}, defaults, options); 
      this._defaults = defaults; 
      this._name = pluginName; 
      this.element = element; 
      this.init(); 
    } 

    Plugin.prototype = { 
      init: function() { 
        // SOME INIT FUNCTION 
      }, 
      someMethod: function(el, options) { 
        // DO SOMETHING ELSE 
      } 
    } 

    $.fn[pluginName] = function(options) { 
      return this.each(function() { 
        if (!$.data(this, 'plugin_' + pluginName)) { 
          $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); 
        } 
        else if ($.isFunction(Plugin.prototype[options])) { 
          $.data(this, 'plugin_' + pluginName)[options](); 
        } 
      }); 
    } 

})(jQuery, window, document); 

然後我們有這個簡單的html：

<a href="a link to somewhere">My Link</a> 

讓我們在我們的插件說我們想鏈接被點擊時提醒href和防止默認操作。顯然，這是一個非常愚蠢的例子，我想要做的事情更加激烈，所以請不要說'你不需要插件，'因爲這不是重點。

所以我們初始化我們對我們的鏈接插件：

$(document).ready(function(){ 
    $('a').each(function(){ 
     $(this).MyPlugin(); 
    }); 
}); 

我不知道是否有添加一個點擊的方式：方法，只是有它自動調用。或者也許有某種內部事件綁定？

Answer 1

編輯2：我是對的第一次，嘿。我之前沒有使用過這種模式，但我喜歡它。

因此，在您的插件原型方法中，您可以訪問each循環中的元素，因此您可以在那裏綁定點擊或任何您想要的內容！

$.fn[pluginName] = function(options) { 
    return this.each(function() { 
     $(this).click(function(event) { 
      event.preventDefault(); 
      alert($(this).attr('href')); 
     }); 

     if (!$.data(this, 'plugin_' + pluginName)) { 
      $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); 
     } 
     else if ($.isFunction(Plugin.prototype[options])) { 
      $.data(this, 'plugin_' + pluginName)[options](); 
     } 
    }); 
} 

而且，在function Plugin線是在你的代碼缺少{。

看到它在此琴工作：http://jsfiddle.net/PDyEd/

Answer 2

我只想在初始化函數中添加一個click事件，所以它是清潔

Plugin.prototype = { 
    init: function() { 
     // DO INIT 

     $(this.element).on("click", function(e){ 
      e.preventDefault(); 
      alert($(this).attr("href")); 
     }); 
    }, 
    someMethod: function(el, options) { 
     // DO SOMETHING ELSE 
    } 
}; 

或者，

你可以只把它放在一個單獨的方法：http://jsfiddle.net/nashio/PDyEd/4/

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

    var pluginName = 'MyPlugin'; 
    var defaults = { 
     propertyName: "value" 
    }; 

    function Plugin(element, options) { 
     this.options = $.extend({}, defaults, options); 
     this._defaults = defaults; 
     this._name = pluginName; 
     this.element = element; 
     this.init(); 
     this.attachEvents(this.element, this.options); 
    } 

    Plugin.prototype = { 
     init: function() { 
      // DO INIT 
     }, 
     attachEvents: function(el, options) { 
      $(el).on("click", function(e){ 
       e.preventDefault(); 
       alert($(this).attr("href")); 
      }); 
     } 
    }; 

    $.fn[pluginName] = function(options) { 
     return this.each(function() { 


      if (!$.data(this, 'plugin_' + pluginName)) { 
       $.data(this, 'plugin_' + pluginName, new Plugin(this, options)); 
      } 
      else if ($.isFunction(Plugin.prototype[options])) { 
       $.data(this, 'plugin_' + pluginName)[options](); 
      } 
     }); 
    } 

})(jQuery, window, document); 

$(document).ready(function() { 
    $('a').MyPlugin(); 
});