jQuery Multiple Event Handlers - How to Cancel?

Question

I have two functions bound to a click event at two different times (using jQuery). The order in which they are fired is significant. They are firing in the correct order.

Answer 1

Use the stopImmediatePropagation function of the jQuery event object.

Keeps the rest of the handlers from being executed. This method also stops the bubbling by calling event.stopPropagation().

$(document).click(function(event) { 
  alert('a');
  event.stopImmediatePropagation();
  return false;
});

$(document).click(function() {
  alert('b');
});

Answer 2

The first thing I'm asking is: why do you have two functions bound to the same click event? Having access to the code, why don't you just make that one single call?

$(function (){
    var callbackOne = function(e){
        alert("I'm the first callback... Warning, I might return false!");
        return false;
    };

    var callbackTwo = function(e){
        alert("I'm the second callback");
    };

    $(document).click(function (e){
        if(callbackOne(e)){
            callbackTwo(e);
        }
    });
});

Answer 3

If what nickf said doesn't work, you could use a small state machine:

var trigger = 0;

$(document).click(function() { 

  alert('a');
  if(you_want_to_return_false) {
    trigger = 1;
    return false;
  }
});

$(document).click(function() {
  if(trigger !== 0) {
  alert('b');
  } 
  trigger = 0;
});

Not the prettiest solution, but it will work.

Answer 4

Thanks, unbind works for redefining functions.

  $(document).ready(function(){
        $("#buscar_mercaderia").click(function(){ alert('Seleccione Tipo de mercaderia'); 
   });
$(".tipo").live('click',function(){
            if($(this).attr('checked')!=''){
                if($(this).val()=='libro'){
                    $("#buscar_mercaderia").unbind('click');
                    $("#buscar_mercaderia").click(function(){  window.open('buscar_libro.php','Buscar Libros', 'width=800,height=500'); });
                }else if($(this).val()=='otra'){
                    $("#buscar_mercaderia").unbind('click');
                    $("#buscar_mercaderia").click(function(){ window.open('buscar_mercaderia.php','Buscar Mercaderias', 'width=800,height=500');  });
                }
            }
        })

Answer 5

Does using unbind help?

$(document).click(function() { 
  alert('a');
  $(this).unbind('click');
  return false;
});

Answer 6

An other solution is to debounce or throttle the function.

This way you could ensure despite it firing multiple times, it only executes within a set duration. This would allow your code to work as-is.