Tengo el siguiente árbol html:

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

Estoy usando ajax para cargar el siguiente contenido en#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>

lo que sucede con éxito, y el HTML resultante se ve así:

<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>

Ahora quiero hacer clic en el enlace cargado dinámicamente para cargar el siguiente contenido:

<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 el HTML final se vea así:

<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>

He oído que debo usaron() para enlazar jquery a un contenido cargado dinámicamente. Así que hago lo siguiente:

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

Ques1: ¿Es este el uso correcto deon() ? Porque cuando hago clic en el enlace, no consigoalert 1 en la pantalla y la página simplemente navega awhoweare.php

Ques2: En caso de que me las arregle para recibir la alerta, ¿es posible, en teoría, hacer clic en un enlace que carga el contenido que reemplaza al enlace en primer lugar?