Reloading an external element (via jQuery's .load) without impact on same-named host elements on sam
        Posted  
        
            by Martin Pescador
        on Stack Overflow
        
        See other posts from Stack Overflow
        
            or by Martin Pescador
        
        
        
        Published on 2010-04-12T14:03:44Z
        Indexed on 
            2010/04/12
            14:13 UTC
        
        
        Read the original article
        Hit count: 845
        
jQuery
|jquery-ajax
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?
© Stack Overflow or respective owner