title: I need Ajax .on to fire on the second .on and not the first
body: <p>I'm having difficulty with <a href="http://www.appelsiini.net/projects/chained" rel="nofollow">chained selects</a> firing my ajax call intended to happen .on change.  The problem is, when Chained Select populated the second select (the one I'm intending to use to call ajax) it fires the ajax call prematurely.  </p>
  
  <p>Is it possible to skip the first .on and fire from the second .change subsequently?</p>
  
  <p>Chained Selects Function:</p>
  
  <pre><code>  $(function() {    
              $("#products").remoteChained({  
                  parents: "#instrument",
                  url: "/ajax/instrument",
                  loading: "loading",
  
              });       
    });
  </code></pre>
  
  <p>My Ajax Function: </p>
  
  <pre><code>$('#products').on('change', function(event) {
      event.preventDefault();
      var href = $(this).find('option:selected').attr('value');
      console.log('href ' + href);
      location.hash = href;
      $('#sort').hide();
      $('#sort').css({ display: 'block' }).animate({ height: '100%'
      }, function() {
  
          $('#sort').fadeIn('slow').html('&lt;div class="clearfix loading"&gt; LOADING &lt;/div&gt;');
          $('#loader').css({ border: 'none', position: 'relative', top: '24px', left: '48px', boxShadow: 'none'
          }); 
       // http://loadinfo.net/
          $.ajax({
              url: "/ajax/ajax_sort/" + href,
              dataType: "html",
              success: function(data) {
                  $("#sort").html(data);
            $('.c3 .card').equalHeights();
                  $('.product-count').fadeOut('slow');
                  $('#ajax-hidden').hide().fadeOut('slow');
              }
          });
      });
  </code></pre>