trouble with loading a page in jquery via ajax

I am loading a page into a div via the jquery load function. The actual loading part is fine. The code looks basically like this:

$("div#loadhere").load("newfile.html?" + new Date().getTime());

In newfile.html I have a series of divs, and I have code that (for testing) sends an alert when a div is clicked. That's fine too.

The problem is this: when I load a page into div#l开发者_C百科oadhere and then choose a different page to load into the same div, the alert message happens twice. If I load yet another page, it happens three times.

In other words, it seems like jquery (or the DOM) doesn't realize that the previous loads have gone away.

Thanks very much in advance for any help!

If I'm not mistaken, you need to use the jQuery unbind to unbind the event.

unbind

Here's a similar question on stackoverflow

Try .delegate() - http://api.jquery.com/delegate/

You can bind the event handler to the 'body' or a similar, top-level div, and watch for events targeting your desired div. The example given on the docs site is for a table:

$("table").delegate("td", "hover", function(){
    $(this).toggleClass("hover");
});

This way avoids the multiple binds issue you are encountering.