title: jQuery can't bind event to AJAX loaded element using .on()
body: <p>Using <code>.load</code>, I'm loading the following content into <code>#step_2</code> div:</p>
  <pre><code>&lt;div id=&quot;step_2&quot;&gt;
      Select a subcategory:
      &lt;select id=&quot;subcategory_id&quot; name=&quot;subcategory_id&quot;&gt;
          &lt;option value=&quot;0&quot;&gt;All subcategories&lt;/option&gt;
          &lt;option value=&quot;68&quot;&gt;Cool&lt;/option&gt;
          &lt;option value=&quot;15&quot;&gt;Cooler&lt;/option&gt;
          &lt;option value=&quot;74&quot;&gt;Excellent&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I'm then trying to detect when user selects something:</p>
  <pre><code>$(&quot;#subcategory_id&quot;).on(&quot;change&quot;, function(){
      alert( 'Success!' );
  });
  </code></pre>
  <p>but with no success. Does anyone see what I'm doing wrong? Help greatly appreciated.</p>
  <p>NOTES:</p>
  <p>Here's the full CSS path as seen by FireBug:</p>
  <pre><code>html.js body div#container div#main form div#step_2 select#subcategory_id
  </code></pre>
  <p>Here's the full Javascript file, if context matters:</p>
  <pre><code>$(document).ready(function() {
  
      $(&quot;#category_id&quot;).change(function() {
          $(&quot;#spinner&quot;).show();
          $(&quot;#step_2&quot;).load(&quot;process.php?selected=category&quot;, { value: $(this).val() }, function() {
              // Do something to say the data has loaded sucessfully
              $(&quot;#spinner&quot;).hide();
          });
      });
              
      $(&quot;#subcategory_id&quot;).on(&quot;change&quot;, function(){
          alert( 'Success!' );
      });
      
  });
  </code></pre>