title: JQuery change functions for select boxes. Only running first function
body: <p>I am trying to get two change functions to run, one when one select box is changed, the other when another select box is changed. </p>
  
  <pre><code>$(document).ready(function() {      
          $("#area").change(function() { 
                  $.ajax(
                  {
                      type:"POST",
                      url: "./includes/AJAX/getFunctions.cfm?areaID=" + $(this).val(),
                      cache: false,
                      success: function(html)
                      {
                          $("#functions").html(html)
                      }
                  }); //end of AJAX call
          }); //end of area
  
          $("#function").change(function() {
              alert("Change"); 
                  $.ajax(
                  {
                      type:"POST",
                      url: "./includes/AJAX/getDefects.cfm?functionID=" + $(this).val() + "&amp;areaID=" + $("#area").val(),
                      cache: false,
                      success: function(html)
                      {
                          $("#defects").html(html)
                      }
                  }
                  );
          }); 
      });
  </code></pre>
  
  <p>I am only able to get the first function to run, but the second never does. I use firebug to just make sure there is not an error in syntax, but it never reaches the code. Anyone have any ideas what is happening?</p>
  
  <p>Here are my select boxes in my html:</p>
  
  <pre><code> &lt;tr&gt;
                          &lt;td align="right"&gt;
                              Business Area:
                          &lt;/td&gt;
                          &lt;td align="left"&gt;
                              &lt;cfselect name="area" id="area"&gt;
                              &lt;option value=""&gt;Select Business Area&lt;/option&gt;
                          &lt;cfloop query="getAreas"&gt;
                              &lt;option value="#getAreas.areaID#"&gt;#getAreas.areaDesc#&lt;/option&gt;
                          &lt;/cfloop&gt;
                              &lt;/cfselect&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;!--- Business Function ---&gt;
                      &lt;tr id="trFunction" style="display:none"&gt;
                          &lt;td align="right"&gt;
                              Business Function:
                          &lt;/td&gt;
                          &lt;td align="left"&gt;
                          &lt;div id="functions"&gt;
                              &lt;select name="functionID" id="functionID"&gt;
                                  &lt;option value=""&gt;Select Business Function&lt;/option&gt;
                              &lt;/select&gt;
                           &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
                      &lt;!--- Defect Type ---&gt;
                      &lt;tr id="trDefect" style="display:none"&gt;
                          &lt;td align="right"&gt;
                              Defect Type:
                          &lt;/td&gt;
                          &lt;td align="left"&gt;
                          &lt;div id="defects"&gt;
                              &lt;select name="defect" id="defect"&gt;
                                  &lt;option value=""&gt;Select Defect&lt;/option&gt;
                              &lt;/select&gt;
                           &lt;/div&gt;
                          &lt;/td&gt;
                      &lt;/tr&gt;
  </code></pre>
  
  <p>And here are the queries:</p>
  
  <pre><code>&lt;cfquery name="getFunctions" datasource=#application.datasource#&gt;     
      SELECT *
      FROM lamFunctions
      WHERE status = 1
      AND areaID = '#url.areaID#'
      ORDER BY functionDescription        
  &lt;/cfquery&gt;
  
  &lt;cfoutput&gt;
      &lt;select name="functionID" id="functionID"&gt;
          &lt;option value=""&gt;Select Business Function&lt;/option&gt;
      &lt;cfloop query="getFunctions"&gt;
          &lt;option id="#functionID#" name="#functionDescription#" value="#functionID#"&gt;#functionDescription#&lt;/option&gt;
      &lt;/cfloop&gt;
      &lt;/select&gt;   
  &lt;/cfoutput&gt;
  
  &lt;cfquery name="getDefects" datasource=#application.datasource#&gt;     
      SELECT *
      FROM lamDefects
      WHERE status = 1
      AND areaID = '#url.areaID#'
      AND functionID like '%#url.functionID#%'
      ORDER BY defectDesc        
  &lt;/cfquery&gt;
  
  &lt;cfoutput&gt;
      &lt;cfif #url.functionID# eq 3&gt;
          &lt;select name="defect" id="defect" style="width:350px"&gt;
              &lt;option value=""&gt;Select Defect&lt;/option&gt;
          &lt;cfloop query="getDefects"&gt;
              &lt;option id="#defectID#" name="#defectDesc#" value="#defectID#"&gt;#defectDesc#&lt;/option&gt;
          &lt;/cfloop&gt;
          &lt;/select&gt;
      &lt;cfelse&gt;
          &lt;select name="defect" id="defect"&gt;
              &lt;option value=""&gt;Select Defect&lt;/option&gt;
          &lt;cfloop query="getDefects"&gt;
              &lt;option id="#defectID#" name="#defectDesc#" value="#defectID#"&gt;#defectDesc#&lt;/option&gt;
          &lt;/cfloop&gt;
          &lt;/select&gt;
      &lt;/cfif&gt;    
  &lt;/cfoutput&gt;
  </code></pre>