use mouseup function inside a custom jQuery plugin

Question

I have created a custom plugin for jQuery.

I want to hide .social-box if someone click outside of it.

for hiding div if clicked outside of it, I need this solution:

Use jQuery to hide a DIV when the user clicks outside of it

but it is using mouseup().

So, please please tell me ho do I add mouseup() to my below plugin:

(function($){
    $.fn.extend({
        doAjax: function(options) {
            var defaults = {
                ajaxurl: ajaxurl,
                action: '',
            };

            var options = $.extend(defaults, options);

        return this.each(function() {
             var o =options;
             var obj = $(this);                
             var a = $('a', obj);

            // load FB like box 
            function call_ajax(){
                var ajax = $.ajax({ type: 'POST', url: o.ajaxurl, data: { action: o.action }, dataType: 'html' });                      

                ajax.done(function(msg) {           
                    obj.children('.social-box').append(msg);
                });
            }

            // toggle social box
            a.click(function(e) {
                e.preventDefault();
                obj.children('.social-box').slideToggle('fast');    
                if ($(this).data('loaded') == 'no'){            
                    call_ajax();
                    $(this).data('loaded', 'yes');          
                }
            }); 
        });
    }
    });
})(jQuery);

Answer 1

$(document).on('click', function(e) {
    if ( ! $(e.target).closest('.social-box').length ) {
        $('.social-box').hide();
    }
});

When clicking anywhere (the document) check if the clicked element is within .socialbox by checking if it has a parent somewhere with that class, if not, hide .socialbox !