Question

Below code is Just for Demo.

Html

<div>
<a href='javascript:' id="foo">Foo</a>
</div>
<br>
<div id="target"></div>

JavaScript

jQuery(function () {
    jQuery('#foo').bind('click', write);
    jQuery('#foo').bind('click', write);
    jQuery('#foo').bind('click', write);
    jQuery('#foo').bind('click', write);

   /*
      although  I am binding click event four times with same METHOD
      I want jQuery to bind it only once and ignore rest request to bind the 
      same function
  */
});
function write() {
    jQuery('#target').append('modified<br>');
}

In JavaScript I am binding same function four times to a link using jQuery, But is there any way that jQuery processes only first request and ignores other request to bind same event.

Demo : using jQuery1.7.1

Demo : using jQuery1.3.2 (I am getting expected behavior, but I want this behavior with jQuery1.7.1)

Answer 1

You should avoid binding the event handler four times in the first place.

If you can’t, I suggest you to unbind previous event handlers first (jQuery 1.7 syntax):

jQuery('#foo').off('click', write).on('click', write); 

You could also use namespaced events:

jQuery('#foo').off('click.write').on('click.write', write); 

Anything else is fighting the symptoms of your problem, not the cause. –

---

Regarding the different behaviour in jQuery 1.3 and jQuery 1.7:

As of jQuery 1.4.2 duplicate event handlers can be bound to an element instead of being discarded. This is useful when the event data feature is being used, or when other unique data resides in a closure around the event handler function.