jQuery - overlapping click events... How to prevent one

Question

I'm currently working with a click event that fires an ajax call. I'd like to leverage a small plugin which, will handle some form data validation. The problem is that both the ajax call and the validation function of the plugin will be fired on the same click event.

In the end, I'd like the plugin to override the ajax function. I'm not really sure how to go about it. Any suggestions? I can't post the entire plugin, but here's a quick sample.

Ajax Call fired here:

$('p.thisClass').live('click',function() {
    //Ajax Fires here
});

Plugin snippet here:

config.button.live('click', function() {
    someFunction();
    // Stop Other click event from firing
});

There are a few ways to look at this, but in the end, I want the plugin to take precedence over the click that fires the ajax. Any thoughts on how to accomplish this??

Thanks

Answer 1

To cancel an event i jquery you just

return false;

You just have to check, which event handler to attach first.

A much better solution would however be to validate on change,not on submit. Doing so makes it much faster and less annoying for users to correct their bugs.

Answer 2

Do you have control of the binding function? If so, reference jQuery's unbind or die methods: Unbind Die

Using such, you can assign your original ajax click event to a variable and then unbind/die just that one:

Example: To unbind just one previously bound handler, pass the function in as the second argument:

     var foo = function () {
     // code to handle some kind of event
     };

     $("p").bind("click", foo); // ... now foo will be called when paragraphs
 are clicked ...

     $("p").unbind("click", foo); // ... foo will no longer be called.