Is there a way to bind a command to fadeIn event without having to .trigger('fadeIn')?

bind, events, jquery

Solution

Sure,

var _old = $.fn.fadeIn;

$.fn.fadeIn = function(){
    var self = this;
    return _old.apply(this,arguments).promise().done(function(){
        self.trigger("fadeIn");
    });
};

// and your code: // replace .bind with .on if jQuery 1.7+
​$("div").bind("fadeIn",function(){alert("worky");});

$("div").fadeIn(2000);​​​​​​​​​​​​​​​​​

Demo http://jsfiddle.net/gEVsX/2/

Update for comment

var _old = $.fn.fadeIn;

$.fn.fadeIn = function(){
    return _old.apply(this,arguments).trigger("fadeIn");
};

// and your code: // replace .bind with .on if jQuery 1.7+
​$("div").bind("fadeIn",function(){alert("worky");});

$("div").fadeIn(2000);​​​​​​​​​​​​​​​​​

Problem

I have an interactive form system that has different modules, where the forms for each module is contained inside a different div element. When i change from one module to another, I often do this: ``` $('#module_1').hide(); $('#module_2').fadeIn(); ``` I like this, but now, after developing this system for some time, I have some functions (like re-initialize a jqgrid) that I want to happen every time a `fadeIn` occurs. I set up this up like this: ``` $('#module_2').bind('fadeIn',function(){ initialize_jqgrid(); }); ``` Is there a way I can make this work for all instances of `$('#module_2').fadeIn();` without having to go to every instance and replace it with this? ``` $('#module_2').fadeIn().trigger('fadeIn'); ``` The motivation behind this is just to have cleaner code, `$('#module_2').fadeIn().trigger('fadeIn');` is a little redundant. Thanks a lot!

Original source