title: Multiple change events
body: <p>I have 3 <code>&lt;select&gt;</code> menus, each with change events working on them. Break down of the code looks like this:</p>
  
  <pre><code>$(document).ready(function(){
      // some code
  
      $("#selectOne").change(function() {
          // some code inc ajax request
  
          $("#selectTwo").change(function() {
              // some code inc a different ajax request
          });
  
          $("#selectThree").change(function() {
              // some code inc a yet another ajax request
  
          });
      });
  });
  </code></pre>
  
  <p>The problem with the above is that, while selectOne works fine, and selectTwo seems to work fine also, if I change selectThree, the code for both selectTwo AND selectThree fires at the same time. Depending on the sequence of selection of any of the 3 selects, the response of selectThree.change can be to display and hide each of the previous responses, before settling on displaying an incorrect response.</p>
  
  <p>What I'd like to do is this:</p>
  
  <pre><code>$(document).ready(function(){
      // some code
  
      $("#selectOne").change(function() {
          // some code inc ajax request
      });
  
      $("#selectTwo").change(function() {
          // some code inc a different ajax request
      });
  
      $("#selectThree").change(function() {
          // some code inc a yet another ajax request
  
      });
  });
  </code></pre>
  
  <p>In this scenario, selectOne works fine, but selectTwo and selectThree don't respond to change.</p>
  
  <p>Is there a way of correcting any of this, so that as each element is changed, only the correct change event is fired?</p>