How do I use my jQuery extension in the on function?

Question

In jQuery, I know it is possible to extend and create functions for certain types of operations through $.fn.

Thus:

(function ( $ ) {

    $.fn.clickOut = function (callback) {

        var that = this;

        $(document).click(function (e) {

            if ( $(e.target).closest(that).size() > 0) {

                return;
            }

            $.isFunction(callback) && $.proxy(callback, that)(e);
        });
    }

})( jQuery )

The function works correctly. But how can I make it work with the use of on, because I need to assign it to dynamically created elements.

Is there any way to "create a function" (I don’t know how else to say this) for the on of jQuery?

Roughly speaking, I wanted it to work like this:

$('div').clickOut(); // Forma normal

// Forma que tentei, e não deu certo.
$('#my-uls').on('clickOut', 'li', function (...){}); 

Answer 1

In fact the answer of Emir Marques hit the beam. The way is yes the trigger, which is necessary to trigger the event. Any event fired with trigger can be captured with on. Thus:

(function ( $ ) {

    $(document).click(function (e) {
        if ($(e.target).closest(that).size() > 0) {
            $(e.target).trigger('clickOut');
            return;
        }
    });

    // Feito isso, você pode usar:
    $('#my-uls').on('clickOut', 'li', function (){
        // faz algo
    }); 

})( jQuery )

Answer 2

For this you can use the Trigger method.

In this case instead of using:

 $(<seletor>).on("clickOut", function(){
     /* Faz algo */
 });

You use:

 $(<seletor>).trigger("clickOut", function(){
    /* Faz algo */
 });

Full example:

(function ( $ ) {

    $.fn.clickOut = function (callback) {

        var that = this;

        $(document).click(function (e) {

            if ( $(e.target).closest(that).size() > 0) {

                return;
            }

            $.isFunction(callback) && $.proxy(callback, that)(e);
        });
    }

    $(<seletor>).trigger("clickOut", function(){
        /* Faz algo */
    });

})( jQuery )

Answer 3

From what I understand the question, you want to create a callback so that after executing the .on it performs its function clickOut.

For this you must call it within the function.

(function($){
    $.fn.alertX = function(x){
        alert(x)
    }
})(jQuery);

jQuery('body').on('click', 'input', function(){
    var id = jQuery(this).attr('id');
    jQuery(this).alertX(id);
});

Example

OBS: I’m still seeing if there is a way to always do this in the method, type prototype.