 <p>Check this revised <a href="http://jsfiddle.net/Y3wzJ/12/" rel="nofollow">JSFiddle</a>.</p> <p>You're trying to bind the new plugin event handler before you defined the event handler. Move the event handler to the top of the script panel like so:</p> <p><strong>Script Panel:</strong></p> <pre><code>/* Define New Handler */ (function($) { $.fn.betterMouseover = function (accidentTime, funkcia) { if (accidentTime == undefined || accidentTime == null) { accidentTime = 250; } if (funkcia == undefined || funkcia == null || typeof funkcia != 'function') { funkcia = function() { console.log("no callback action specified for betterMouseover()"); }; } return this.each(function() { var jeOut; $(this).mouseenter(function() { var totok = this; jeOut = false; setTimeout(function(){ if (!jeOut) { $(totok).betterMouseoverHandler(funkcia); } }, accidentTime); }).mouseleave(function() { jeOut = true; }); }); } $.fn.betterMouseoverHandler = function (fx) { fx.call(this); } }(jQuery)); /* Bind New Handler */ $("#col1, #col2").mouseenter(function() { var color; if ($(this).attr('id') == "col1") { color = "#44a0ff"; } else { color = "red"; } $("#original").css({backgroundColor:""+color+""}); }); $("#col3, #col4").betterMouseover(500, function() { var color; if ($(this).attr('id') == "col3") { color = "#44a0ff"; } else { color = "red"; } $("#better").css({backgroundColor:""+color+""}); }); </code></pre>