Mam następujące drzewo html:

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

Używam ajax do załadowania następującej treści#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>

co się udaje, a wynikowy HTML wygląda tak:

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

Teraz chcę kliknąć dynamicznie załadowany link, aby załadować następującą treść:

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

aby ostateczny kod HTML wyglądał tak:

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

Słyszałem, że powinienem użyćon() powiązać jquery z dynamicznie ładowaną treścią. Robię więc:

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

Ques1: Czy to prawidłowe użycieon() ? Ponieważ gdy klikam link, nie dostajęalert 1 na ekranie, a strona po prostu przechodzi dowhoweare.php

Ques2: Okażę, że udaje mi się uzyskać alert, czy teoretycznie jest możliwe kliknięcie łącza, które ładuje zawartość, która zastępuje kliknięty link?