Remove an event handler after 3 clicks

Question

Remove an event handler after 3 clicks

Navigation

#1 by (3 votes)
#2 by (1 votes)
#3 by (0 votes)

0

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

Example: link

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

asked by anonymous 13.01.2015 / 12:48

3 answers

add number and exclude \ n in python How to do advanced data filtering across multiple fields? [closed]

score 3 · Answer 1

Some details are missing for this to work:

method .off() is misconfigured:

The method can be used without parameters but it will remove all the event handlers added with .on() , half dangerous / unpredictable. It is best to define which type of event (and not the event object itself as you have), and now to be safe to pass the function that you want to undo. That is:

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

Another problem already mentioned is the issue of the code being run before the DOM is ready. This solves wrapper $("#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: link

score 1 · Answer 2

1

Place the .on () inside the Jquery Ready.

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

13.01.2015 / 15:12

score 0 · Answer 3

The section below has a slightly different approach than the others mentioned, using the design pattern 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 you explain the use of the off method and the #

(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