What happens after jquery load()?

Question

  Ok folks, I must apologize before asking for two reasons:

• My English (not my native language).
• If there is another question here like mine. I searched, but none of the responses took my doubt.

That said, let's go:

  I'm trying to create an enviroment where the page load a bunch of external pages. For usability and animation reasons, I tried to load two pages at a time. Every page has a button, the button is supposed to animate and unload the page the user sees. After the animation, the unloaded element switch name with the loaded element, and a new page is loaded to the unloaded element.

Here's an image to help: (Sorry, I don't have reputation enough to post the image directly.) http://img42.imageshack.us/img42/6640/npqv.jpg

Here's the html code:

<div id="wrapper">
<div id="conteudo">
        <div class="loader-esquerda">
        </div>
        <div class="loader-direita">
        </div>
    </div>
</div>

The css:

#wrapper{
    position:relative;
    width: 1000px;
    margin:auto;
    overflow:hidden;
}
#conteudo{
    width:2000px;
}
.loader-esquerda{
    width:1000px;
    float:left;
}
.loader-direita{
    width:1000px;
    float:left; 
}

Jquery:

$(function(){
    var page1 = 1;
    var page2 = 2;
    $('.loader-esquerda').load('passo01.php');
});

passo01.php:

<h2>1º Passo</h2>
Precisamos de alguns dados relativos à seu banco de dados.
<hr />

<a href="#" class="btn direita proximo">Avançar &raquo;</a>

  The fact is that I don´t know how to handle the <a> inside passo01.php. I can´t reach that with $('a').hasClass('proximo'). How can I handle the code inside passo01.php after loaded that into my main page ?

Thank you very much. I hope you can understand my problem.

Answer 1

If you want to access an element that was added by a .load() call, then that has to be done in the complete callback of .load()

you need to use the load callback

$('.loader-esquerda').load('passo01.php', function(){
    $('a.proximo').dosomething
});

Demo: Plunker