22
 $('.ajax').click
 (        
    function()
    {
        // If been bound then we need to return here.
        alert(':D');
    }
 )

 $('.ajax').click
 (
    function()
    {
        // If been bound then we need to return here.
        alert(':D');
    }
 )

In this case, I have called duplicate code. How do I detect if the event has been bound to prevent it from triggering two alert boxes?

Antony Carthy
  • 5,549
  • 9
  • 34
  • 38

5 Answers5

32

There's a really good way to do this in jQuery.

Here's an example.

function alertEvent() {
   alert(":D");
}
$(".ajax").bind("click", alertEvent);
//When you want to ensure it won't happen twice...
$(".ajax").unbind("click", alertEvent);
$(".ajax").bind("click", alertEvent);

This method will only remove the event you specify, which makes it ideal for what you want to do.

Fenton
  • 241,084
  • 71
  • 387
  • 401
  • How can one pass the click arguments e with that? Can I go $(".ajax").bind("click", alertEvent(e)); ? – Antony Carthy Jun 09 '09 at 09:36
  • define the function as "function alertEvent(e)" to get the event argument. – mcrumley Jun 09 '09 at 20:33
  • This did not work for me, I think it was because If the function is declared with a `let` scope then every time this function runs, it is creating a new function pointer? in the scope so the unbind function can not find the function you are trying to unbind. – Chéyo Jul 22 '18 at 22:16
22

If using jQuery >= 1.7 you can use .on()/.off() API in conjunction with an event namespace. In this example .off() is called immediately to ensure previous events (of any kind) with the namespace are un-bound:

$("form")
    .off(".validator")
    .on("keypress.validator", "input[type='text']", validate);

It's quite a flexible API so you can be very specific if you need to be:

$("form")
    .off("keypress.validator", "input[type='text']", validate)
    .on("keypress.validator", "input[type='text']", validate);

The docs: http://api.jquery.com/off/

Pete B
  • 1,709
  • 18
  • 11
9

try unbinding it before binding:

$(".ajax").unbind("click").click( 
      function () { 
    alert("Hello"); 
  } );

read this for some more information.

TheVillageIdiot
  • 40,053
  • 20
  • 133
  • 188
  • This will unbind all click events, not just the specified event. I've added an example that will only unbind the event you don't want to duplicate, which means other events will still fire. – Fenton Jun 09 '09 at 09:13
5

Simplest solution from here bind event only once

Copied code sample:

function someMethod()
{
    $(obj).off('click').on('click', function(e) {
        // put your logic in here 
    });
}
Leon van Wyk
  • 679
  • 8
  • 7
0
function demo()
{
// your code here which will called on click event
}

$(document).ready(function(){
$('.add').bind('click',demo);

});

//After successfully ajax call response
//Unbind the click event first
$('.add').unbind('click',demo);
//Then again bind the event
$('.add').bind('click',demo);
AGuyCalledGerald
  • 7,882
  • 17
  • 73
  • 120
Mitesh Panchal
  • 1