binding jquery to dynamically loaded content
<p>I have the following html tree : </p>

<pre><code>&lt;div class="section yellow" id="section1"&gt;
    &lt;div id="content-wrap1" class="content-wrap"&gt;
&lt;/div&gt;
</code></pre>

<p>I am using ajax to load the following content into <code>#content-wrap1</code>:</p>

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

<p>which happens successfully, and the resulting HTML looks like this :</p>

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

<p>Now I want to click on the dynamically loaded link to load the following content :</p>

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

<p>so that the final HTML looks like this :</p>

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

<p>I have heard that I should use <code>on()</code> to bind jquery to a dynamically loaded content. So I do the following:</p>

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

<p><strong>Ques1</strong>: Is this the correct usage of <code>on()</code> ? Because when I click the link, I don't get <code>alert 1</code> on the screen and the page simply navigates to <code>whoweare.php</code></p>

<p><strong>Ques2</strong>: Incase I do manage to get the alert, is it possible theoritically to click on a link that loads content that replaces the link clicked in the first place ?</p>
