Eu tenho a seguinte árvore html:

<div class="section yellow" id="section1">
    <div id="content-wrap1" class="content-wrap">
</div>

Eu estou usando o ajax para carregar o seguinte conteúdo em#content-wrap1:

<div id="content">
    <a href="whoweare.php">Who we are</a>
    <a href="whatwedo.php">Our team</a>
    <p>ABOUT US : Dance is a type of art</p>
</div>

o que acontece com sucesso, e o HTML resultante se parece com isso:

<div class="section yellow" id="section1">
    <div id="content-wrap1" class="content-wrap">.
        <div id="content">
        <a href="whoweare.php">Who we are</a>
        <a href="whatwedo.php">Our team</a>
        <p>ABOUT US : Dance is a type of art</p>
    </div>
</div>

Agora quero clicar no link carregado dinamicamente para carregar o seguinte conteúdo:

<div id="content">
    <a href="whoweare.php">Who we are</a>
    <a href="whatwedo.php">Our team</a>
    <p>Hi there! How are you?</p>
</div>

para que o HTML final seja assim:

<div class="section yellow" id="section1">
    <div id="content-wrap1" class="content-wrap">.
        <div id="content">
        <a href="whoweare.php">Who we are</a>
        <a href="whatwedo.php">Our team</a>
        <p>Hi there! How are you?</p>
    </div>
</div>

Eu ouvi dizer que devo usaron() para ligar jquery a um conteúdo carregado dinamicamente. Então eu faço o seguinte:

('#section1').on("click", "#section1#content-wrap1#content a", function(){
    alert("1");
    toLoad = $(this).attr('href')+' #content';
    $('content-wrap1').load(toLoad);
}

Ques1: Este é o uso correto deon() ? Porque quando eu clico no link, eu não entendoalert 1 na tela e a página simplesmente navega parawhoweare.php

Ques2: Incase Eu consigo obter o alerta, é possível teoricamente clicar em um link que carrega o conteúdo que substitui o link clicado em primeiro lugar?