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?

What jQuery version are you using? It might be that the jQuery object returned by .next() does not have a .selector property. — Bergi
– Bergi, Commented Nov 18, 2013 at 19:49
Could you explain why exactly you are testing for if (!this.selector)? What does not work without that? — Bergi
– Bergi, Commented Nov 19, 2013 at 14:29
I honestly don't know. It was an answer to a different StackOverflow post on how to override listen for .show() events but the comments seems to suggest that it is a workaround for a problem with show being called more than once sometimes — Stephen Groom
– Stephen Groom, Commented Nov 19, 2013 at 14:38

Dennis Martinez · Accepted Answer · 2013-11-18 18:53:24Z

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

answered Nov 18, 2013 at 18:53

Dennis Martinez

6,54311 gold badges53 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stephen Groom Over a year ago

Sorry, both of these things were typos and are correct in the non-dumbed down example code and it still doesn't work. Good spot though :p

Collectives™ on Stack Overflow

JQuery prototype not working when traversing

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related