Events bound with live() run several times.

Events bound with live() run several times.

Hi,

I'm currently building an application which loads in a page via a $.post() call after a link is clicked. The returned data is then placed inside an element (div) via .html();

The problem i'm facing is the page I bring in contains some markup and some javascript similar to below;

$(document).ready(function() {
  $("#button").live("click", function() {
// does something
  });
});

The problem i'm facing is that the loaded in page runs fine the first time i click on the link to load it in but if i click on the link a second time and run the same event (click on the #button that is) the event runs twice.

Now I thought this had something to do with the fact I am using live() instead of bind() so that the event handler exists even after the page is loaded in again so i modified my code to kill all the event handlers of the #button then create the live event handler each time I load the page in, like this:

$(document).ready(function() {
  $("#button").die();
  $("#button").live("click", function() {
// does something
  });
});

Now as i understand it this should destroy all the event handlers on #button and then create the new event handler so it shouldn't matter how many times this page has been loaded in there will only be one event handler on #button.

The problem is it doesn't do this! Instead I still get the same problem that each time i click on the link to load in the page the event handlers double up and run twice, and if i click it again they run thrice!

Any assistance on this would be greatly appreciated as i'm unsure of what exactly i've done wrong.