jQuery On <select> Change Event Not Firing
<p>I have the following in the header:</p>

<pre><code>$('body').on('change', '#userFilter', function(){
   console.log('changed');
});
</code></pre>

<p>And this element is dynamically inserted on the page when a tab is clicked:</p>

<pre><code>&lt;select id="userFilter"&gt;
    &lt;option value="1"&gt;1&lt;/option&gt;
    &lt;option value="2"&gt;2&lt;/option&gt;
    &lt;option value="3"&gt;3&lt;/option&gt;
&lt;/select&gt;
</code></pre>

<p>The problem is that when I change the dropdown nothing is shown in the console.</p>

<p><strong>EDIT:</strong> As other guys pointed out, it seems that I had to wrap the jQuery in:</p>

<pre><code>$(document).ready(function(){ /* code here */ }):
</code></pre>

<p>in order to make sure that the element is available before attaching a handler to it.</p>
