jQuery on ( ) , why does 'click' on another unattached element take place?
<p>html snippet :</p>

<pre><code>&lt;p&gt;add more&lt;/p&gt;
&lt;div class="display_box_ppl_tag" style="border:1px solid red; width:120px; text-align:center;"&gt;
    this is the display box text
&lt;/div&gt;
</code></pre>

<p>js snippet :</p>

<pre><code>$(document).ready(function() {

    $(document).on('click', $(".display_box_ppl_tag"), function(e) {
        //$(".display_box_ppl_tag").on('click',function(){
        e.stop Propagation();
        alert("yes clicked");
    });

    $('p').click(function() {

        $('.display_box_ppl_tag:last').after('&lt;div class="display_box_ppl_tag"&gt;this is display box ppl tag&lt;/div&gt;');

    });

});​
</code></pre>

<p>What is intended through the code is, clicking on <code>&lt;/p&gt;</code> will add a new element with the class 'display_box_ppl_tag' after the existing ones with the same class name, and clicking on any of the divs with  class 'display_box_ppl_tag' will launch an alert box. But when ever <code>&lt;/p&gt;</code> is clicked , the alert box is launched without any click on the said div.</p>

<ol>
<li><p>Why does this happen?</p>

<p>Again if change the following line</p>

<pre><code>$(document).on('click',$(".display_box_ppl_tag"),function(e){
</code></pre>

<p>to </p>

<pre><code>$('.display_box_ppl_tag').on('click',function(){,
</code></pre>

<p>the 'click' event is not attached to the newly created elements. But from the <a href="http://api.jquery.com/on/" rel="nofollow">API</a> , I find  'If the selector is null or omitted, the event is always triggered when it reaches the selected element.'</p></li>
<li><p>Why does not the later coding work as expected ?</p></li>
</ol>
