Reloading an external element (via jQuery's .load) without impact on same-named host elements on same page?

Question

Hello together!

[First, I'm an absolute beginner. I tried to express myself as good as I could - please correct me on any issue... Now: I have the following problem:]

I am loading a div element, which class always is ".gallery" from a couple of pages (in this example "the page index.php?page=orange") into another page's div (in this case with the ID "orange") using the following code:

$("#orange").load("http://example.com/index.php?page=orange .gallery");

Each div.gallery I load in, is a set of a few images. Between them, you can switch (there are "previous"- and "next"-links in ".imgnavi").

$(".imgnavi a").live("click", function(ev) { ev.preventDefault(); ev.stopPropagation(); $(".gallery").load($(this).attr("href")); return false; })

What happens now: Loading the different div.gallery into the new page is no problem, but as soon as I start to navigate inside those divs (each div is a little gallery, where you can switch between images), the div.gallery I am switching in is suddenly loaded into EVERY other div.gallery in the document! How do I prevent that?

Answer 1

Use iframes. that will remove the problem of repeated elements as the iframe encapsulates (isolates) your loaded html.

Answer 2

It depends on how your html is layed out, but you need to filter the results of your $(".gallery") selection when you call .load.

You can do this by specifying the parent as the second parameter (.imgnavi?), or there are methods to go up and down the DOM to find the closest parent etc.