Question

Recently I asked a question, how to bind commands to .fadeIn() events without having to call .trigger('fadeIn') every time they are to be called. I got a very good solution, in this post.

However I tried to do the same procedure for the .hide() event like this:

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

It seems to work in general, as is shown in this jsfiddle: http://jsfiddle.net/gEVsX/5/

But when I add this to the script, I am getting an error from a seemingly unrelated location. It is being thrown from this section of script:

    $('#unique_div_id').dialog({
        autoOpen: false,
        show: "blind",
        hide: "explode",
        modal: true,
        buttons: {
            Cancel: function(){
                $(this).dialog("close");
            }
        }
    });

Which just initializes a div to be a modal dialog. I assume I am getting this error because I have messed up the jQuery hide code. I am getting this error:

Uncaught TypeError: Cannot call method ‘addClass’ of undefined

I have replicated the error in this jsfiddle: http://jsfiddle.net/gEVsX/6/

Does anyone know how I can fix my .hide() function wrapper script?

Thanks a lot!

Answer 1

You’ve broken the contract of the hide() method, which is suppsoed to be chainable.

You need to return this; from your new hide().