Question

I wrote a clickOut event for jQuery. It works for very basic stuff. Now, I am scaling up the tests with a drop-down menu. It seems as though this is getting caught up in the closure. How can I go about fixing this without changing the way clickOut is invoked?

http://jsfiddle.net/QM6Bc/9/

(function ($) {
    'use strict';
    $.fn.clickOut = function (eventData, handler) {
        $('html').click($.proxy(function (event) {
            if (this.has(event.target).length === 0) {
                event.delegateTarget = this.get();
                console.log(this);
                if (handler === undefined) {
                    eventData(event);
                } else {
                    handler(event);
                }
            }
        }, this));
    };
}(jQuery));
jQuery('li').click(function (event) {
    jQuery(this).children().toggle('fast');
    console.log(this);
    event.stopPropagation();
});
jQuery('li li').clickOut(function () {
    console.log(this);
    jQuery(this).children().hide('fast');
});​

Answer 1

You are not binding this to anything in the callbacks, try:

eventData.call(this, event);

handler.call(this, event);