0

Tenho este código, que preciso que o evento click seja removido depois de x tentativas.

Exemplo: http://jsfiddle.net/welguri/s0x213jL/

var qtdadeCliques = 0;
var eventCon = function(evento){
    qtdadeCliques++;
    if (qtdadeCliques >= 3) {
        alert("You clicked the div 'red'!");
       $(this).off(evento);
    }
};
$("#div3").on("click", eventCon);
7
  • 1
    Qual a sua dúvida? Aqui, esse código está funcionando normal... Commented 13/01/2015 às 11:51
  • O estranho é que quando coloco na pagina do site da este erro: Uncaught TypeError: undefined is not a function. @FelipeAvelar Commented 13/01/2015 às 11:55
  • tente colocar dentro desse bloco de codigo: (function( $ ) { $(function() { // O seu código com dolar aqui }); })(jQuery); Commented 13/01/2015 às 11:57
  • Qual a versão do jQuery que o site está usando? Antes de checar isso coloque seu código dentro de $(function(){ /*AQUI*/ }) Commented 13/01/2015 às 11:58
  • Funcionou @GabrielRodrigues. Commented 13/01/2015 às 12:09

3 Respostas 3

3

Faltam alguns detalhes para isso funcionar:

o método .off() está mal configurado:

O método pode ser usado sem parametros mas aí vai remover todos os event handlers adicionados com o .on(), meio perigoso/imprevisivel. O melhor é defenir qual o tipo de evento (e não o objeto evento em sí como tinhas), e já agora para ser seguro passar a função que se quer anular. Ou seja:

$(this).off("click", eventCon);
// ou somente $(this).off(); que desaconselho

Outro problema já referido é a questão de o código estar a ser corrido antes de o DOM estar pronto. Isso resolve-se envolvento $("#div3").on("click", eventCon); com uma função domready do jQuery. Exemplo:

$(function () {
    // código a correr aqui...
});

Assim o código todo seria:

$(function () {
    $("#div3").on("click", eventCon);
});

var qtdadeCliques = 0;
var eventCon = function (evento) {
    qtdadeCliques++;
    if (qtdadeCliques >= 3) {
        alert('Chegou a 3!');
        $(this).off('click', eventCon);
    }
};

jsFiddle: http://jsfiddle.net/5m779gn5/

1

Coloque o .on() dentro do Ready do Jquery.

 (function($) {
    $(function() { 
      $("#div3").on("click", eventCon); 
    }); 
  })(jQuery);
0

O trecho abaixo tem uma abordagem um pouco diferente das demais citadas, é utilizado o design pattern IIFE (Immediately-Invoked Function Expression). A idéia é evitar poluir o contexto global (window) com variáveis desnecessárias. Recomendo a leitura da API do jQuery onde é explicada a utilização do método off e o post do Ben Alman sobre IIFE (Immediately-Invoked Function Expression)

(function($){
    $(function(){
        $(document.documentElement).on("click", (function(){
            var clicksCount = 0;

            return function clickFn(event) {
                if (++clicksCount < 3) return;

                alert("Three!");
                $(this).off("click", clickFn);
            };
        }()));
    });
})(jQuery);

O exemplo pode ser verificado no JSFiddle

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 .