У меня есть следующее дерево HTML:

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

Я использую AJAX для загрузки следующего контента в#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>

что происходит успешно, и в результате HTML выглядит следующим образом:

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

Теперь я хочу нажать на динамически загруженную ссылку, чтобы загрузить следующий контент:

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

так что окончательный HTML выглядит так:

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

Я слышал, что я должен использоватьon() привязать jquery к динамически загружаемому контенту. Поэтому я делаю следующее:

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

Ques1: Это правильное использованиеon() ? Потому что, когда я нажимаю на ссылку, я не получаюalert 1 на экране и страница просто перемещается кwhoweare.php

Ques2: Если мне удастся получить предупреждение, теоретически можно ли щелкнуть ссылку, которая загружает контент, который заменяет ссылку, по которой щелкнули в первую очередь?