JQuery prototype not working when traversing

Question

I am using the following (http://jsfiddle.net/mkmurray/drv5w/27/) code to allow me to override the .show() function of a DIV.

<script>
            (function ($) {
            var _oldShow = $.fn.show;

            $.fn.show = function (/*speed, easing, callback*/) {
                var argsArray = Array.prototype.slice.call(arguments),
                    duration = argsArray[0],
                    easing,
                    callback,
                    callbackArgIndex;

                // jQuery recursively calls show sometimes; we shouldn't
                //  handle such situations. Pass it to original show method.
                if (!this.selector) {
                    _oldShow.apply(this, argsArray);
                    return this;
                }

                if (argsArray.length === 2) {
                    if ($.isFunction(argsArray[1])) {
                        callback = argsArray[1];
                        callbackArgIndex = 1;
                    } else {
                        easing = argsArray[1];
                    }
                } else if (argsArray.length === 3) {
                    easing = argsArray[1];
                    callback = argsArray[2];
                    callbackArgIndex = 2;
                }

                return $(this).each(function () {
                    var obj = $(this),
                        oldCallback = callback,
                        newCallback = function () {
                            if ($.isFunction(oldCallback)) {
                                oldCallback.apply(obj);
                            }

                            obj.trigger('afterShow');
                        };

                    if (callback) {
                        argsArray[callbackArgIndex] = newCallback;
                    } else {
                        argsArray.push(newCallback);
                    }
                    obj.trigger('beforeShow');

                    _oldShow.apply(obj, argsArray);
                });
            };
        })(jQuery);
</script>

I have the following HTML code

<div id="divBeforeHiddenDiv">
foo
</div>
<div id="hiddenDiv" style="display:none">
bar
</div>

And then:

<script>
$('#hiddendiv').bind("beforeShow", function () {
    alert("show event successfully overridden");
});
</script>

It works great when I call $('#hiddenDiv').show() but not if I call $('#divBeforeHiddenDiv').next().show() the hidden div containing 'bar' shows but the alert is not displayed.

So why?

UPDATE

This appears to be a jQuery issue as per Bergi's comment. If I use this JSFiddle on jQuery 1.7.1 it works but using jQuery 1.10.1 or any higher version it does not: JSFiddle. Is there a better solution than simply downgrading?

Answer 1

You need to bind the events to the proper elements.

From the example you've given, and what I've interpreted, this piece of code

$('#beforeShow').bind("beforeShow", function () {
    alert("show event successfully overridden");
});

Should be

$('#hiddenDiv').bind("beforeShow", function () {
    alert("show event successfully overridden");
});

As you want the events to be bound to the hidden div. (or as described in the question, the div right after "#divBeforeHiddenDiv"

You also should change this piece

$('divBeforeHiddenDiv').next().show()

to this

$('#divBeforeHiddenDiv').next().show()

divBeforeHiddenDiv is an ID and in the first code snippet there is no id in the jQuery object.

JSFiddle