2

No jQuery, sei que é possível estender e criar funções para certo tipo de operações através do $.fn.

Assim:

(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 )

A função funciona corretamente. Mas como posso fazê-la funcionar com a utilização de on, pois preciso atribuir a mesma para elementos criadas dinamicamente.

Existe alguma maneira de "criar uma função"(não sei outra maneira de dizer isso) para o on do jQuery?

Grosseiramente falando, queria que funcionasse como se fosse assim:

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

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

3 Respostas 3

2

Na verdade a resposta do Emir Marques bateu na trave. O caminho é sim o trigger, que é necessário para disparar o evento. Todo evento disparado com trigger pode ser capturado com on. Assim:

(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 )
4
  • Olha, esse trecho function ( $ ) { é para definir o plugin. Não seria $(function(){ ? Commented 16/10/2015 às 16:03
  • Com o $ vira um document.ready. Sem ele, é apenas uma closure para isolar escopo e garantir que $ == jQuery. Depende da sua necessidade
    – bfavaretto
    Commented 16/10/2015 às 16:12
  • Pelo o que entendi a necessidade era implementar um método no jquery (no caso clickOut) que pudesse ser usado em qualquer elemento. Por isso no exemplo que citei, ele implemente esse método e em seguida faz o uso da trigger para simular o "on". Nesse teu exemplo seria necessário mais um passo que ser chamar o trigger e então implementar o on. Seria isso mesmo? Commented 16/10/2015 às 16:30
  • Eu entendi que ele queria usar o on, @EmirMarques. Talvez a pergunta não esteja clara mesmo.
    – bfavaretto
    Commented 16/10/2015 às 16:50
0

Para isso você pode usar o método trigger.

Nesse caso ao invés de usar:

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

Você usa:

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

Exemplo completo:

(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 )
2
  • Colocar o seletor junto com a declaração do código da biblioteca? Não acho uma boa ideia. Vou testar para ver se trigger funciona Commented 16/10/2015 às 14:45
  • Você não coloca junto a declaração. Coloquei dentro do onload da página. Você usa da mesma forma que o "on", porém troca esse pelo "trigger". Veja o exemplo de novo, editei o mesmo para ficar mais claro Commented 16/10/2015 às 15:09
0

Pelo que compreendi da questão, você quer criar um callback para que apos executar o evento do .on ele executa sua função clickOut.

Para isso você deve chama-la dentro da função.

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

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

Exemplo

OBS: ainda estou vendo se tem como fazer isso sempre dentro no método, tipo prototype.

3
  • O único problema das respostas todas é o seguinte: Eu criei o clickout para definir que, quando será clicado fora, vai ocorrer um evento (que é o callback da função). Se eu usar o click, vou estar atribuíndo um evento para o click no elemento. Aí acho que o clickout ficaria prejudicado. Commented 16/10/2015 às 16:16
  • @WallaceMaxters Você quer criar um clickOut que não dependa do click? Aí acho que não dá, porque o clique fora é antes de tudo um clique. Na minha resposta, tentei mostrar como fazer com que o on capture um evento não-padrão (custom).
    – bfavaretto
    Commented 16/10/2015 às 16:56
  • Entendi. Percebi isso também! Acha que deixo a pergunta ou deleto? Commented 16/10/2015 às 17:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .