How to prevent events from being bound multiple times.

Question

 $('.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?

Answer 1

try unbinding it before binding:

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

read this for some more information.

Answer 2

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.