Question

I am writing my first jQuery plugin. I am trying add a hover action, but the hover response is being called immediately. Here is my plugin:

(function($){
  var Help = function(element, options) {
    this.$element = element;
    this.options = $.extend({}, $.fn.help.defaults, options);
  };

  Help.prototype.hover = function(name){
    alert(name);
  };

  $.fn.help = function(option){
    return this.each(function () {
      var $this = $(this);
      var help = $this.data('help');
      var options = "";
      var data = $this.data('help-id');
      if(!help) {
        $this.data('help', (help = new Help(this, options)));
      }
      $this.on('hover', help.hover(data));
    });
  };
})(jQuery);

I attach my plugin with $('#one').help(), but this immediately calls the hover function. What am I doing wrong?

Answer 1

You’re not passing a function to on but the result of the call of your function.

Replace

$this.on('hover', help.hover(data));

with

$this.on('hover', function(){help.hover(data)});