Why is jquery event delegation not working?
<p>I have the following html:</p>

<pre><code>        &lt;ul id="contain"&gt;
         &lt;li class="active_one"&gt;&lt;/li&gt;
         &lt;li class="two"&gt;&lt;/li&gt;
        &lt;/ul&gt;
</code></pre>

<p>And the following jquery:</p>

<pre><code>$contain = $('#contain'); //going to use a lot

$contain.on('click','li.two', function(){
                console.log('working');
                //plus do other stuff
                });
</code></pre>

<p>The above does not work, but When I change it to:</p>

<pre><code>$('body').on('click','li.two', function(){
                    console.log('working');
                    //plus do other stuff
                    });
</code></pre>

<p>Then it works, but I know the best practice is to drill as close as possible to the parent element of what I am trying to work with, yet every time I try to do that, I am clearly doing something wrong because my parent level selectors are not working.</p>
