AJAX binds jquery events multiple times

Question

Hi...

I have a masterpage setup, with a pageLoad in the topmost masterpage, which calls pageLoad2 for nested masterpages which calls pageLoad3 for content pages.

In my content page I have a jquery click event and in my nested masterpage I have a web user control.

Whenever I use the user control in the nested masterpage, it rebinds the click event in the content page (undoubtedly because the pageLoad3 is called again), but this makes the click event fire twice on a single click. The problem gets worse the higher up masterpages you go (eg. fires 3 times if user control from topmost masterpage is called).

Can anyone tell me how to make sure it only binds the jquery events once?

Answer 1

You can use the .One() function, which unbinds the event first.

$("#name").One("click", function(){
  // insert code here
});

Answer 2

You could use the .live()-handler so you don't have to bind the controls again and again.