What is the difference between the 2 ways of calling jquery functions?
<p>What is the difference between the calling of jquery functions using <code>on</code> and after <code>find</code> using <code>on</code></p>

<pre><code>&lt;div class="outer"&gt;
    &lt;span&gt;One&lt;/span&gt;
    &lt;div class="inner"&gt;&lt;button id="button"&gt;button 1&lt;/button&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="outer"&gt;
    &lt;span&gt;Two&lt;/span&gt;
    &lt;div class="inner"&gt;&lt;button id="button"&gt;button 2&lt;/button&gt;&lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>The jquery code is</p>

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

    $('div.outer').on('click',".inner #button",function(event){
        console.log(this);//this works
    });
    $('div.outer').find(".inner #button").on("click",function(event){
        console.log(this);//this works
    });
    $('div.outer').find(".outer span").on('click',function(event){
        console.log(this);//this not works
    });
});
</code></pre>

<p>Here it is a simple example I am creating a jquery plugin which has multiple instances so each button clicked twice. I used <code>jquery.off</code> before bind each function, but it not works.</p>
