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!

Welcome ro SO, please don't forget to visit http://stackoverflow.com/faq — Reigel, Jul 02 '10 at 01:15
It's likely you are attaching your click event handler multiple times. — sje397, Jul 02 '10 at 01:20

score 1 · Answer 1 · edited May 23 '17 at 10:27

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

edited May 23 '17 at 10:27

Community

1
1

answered Jul 02 '10 at 01:19

score 0 · Answer 2 · answered Jul 02 '10 at 02:30

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.

trouble with loading a page in jquery via ajax

2 Answers2