trouble with loading a page in jquery via ajax

Question

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#loadhere 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!

Answer 1

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

unbind

Here's a similar question on stackoverflow

Answer 2

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.