Remove event handler after 3 click

Asked

Viewed 73 times

0

I have this code, which I need the click event to be removed after x attempts.

Example: 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);
javascript jquery
  • 1

    What’s your question? Here, this code is working normal...

  • The strange thing is that when I put this error on the website: Uncaught Typeerror: Undefined is not a Function. @Felipeavelar

  • try to put inside this code block: (Function( $ ) { $(Function() { // Your code with dolar here }); })(jQuery);

  • What version of jQuery is the site using? Before you check this put your code within $(Function(){ /HERE/ })

  • It worked @Gabrielrodrigues.

  • the solution was taken from here: http://answall.com/questions/769/howto avoid conflict-entre-jquery-e-mootools

  • If the #div3 already exist on the page at the time you call the on, also needs to correct the call to off. You must pass eventCon instead of evento (as in the response of Paul below).

Show 2 more comments

3 answers

3

Some details are missing for this to work:

the method .off() is poorly configured:

The method can be used without parameters but then will remove all the added handlers Event with the .on(), dangerous/unpredictable environment. The best is to decide what type of event (and not the event object itself as you had), and by the way to be safe to pass the function you want to cancel. That is to say:

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

Another problem already mentioned is the question of the code being run before the DOM is ready. This solves the involvement $("#div3").on("click", eventCon); with a jQuery domready function. Example:

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

So the whole code would be:

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

Place . on() inside Jquery Ready.

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

0

The section below has an approach slightly different from the others cited, is used the design IIFE (Immediately-Invoked Function Expression). The idea is to avoid polluting the global context (window) with unnecessary variables. I recommend reading the jQuery API where use of off method is explained and the Ben Alman’s post on 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);

The example can be checked in Jsfiddle

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.