title: Cascade Select Boxes with jQuery
body: <p>i want to cascading with html select boxes and jQuery ajax posts. when i select an option it send own value to another file and get json values. yes i do this with ajax post. but in the callback function i will add another select box set all of jSON data. and this i do is correctly. but when i select an option from added select box jQuery 'change' event not handling this new select box and eventually doesn't work other functions. </p>
  
  <p>My jQuery codes are follow:</p>
  
  <pre><code>$(document).ready(function(){
  
      $("#kategoriler select").on('change',function(e){
  
          var catID = $(this).val();
  
          if($(this).next().is("select")){
              $(this).nextAll("select").remove();
          }
  
          console.log($(this));
          $.ajax({
              async: false,
              type: "POST",
              url: "ajax_cate_add",
              data: "catID=" + catID,
  
              success: function(data){
  
                  if(data.length &gt; 0){
  
                      var $parent = $("#kategoriler select:last").after("&lt;select&gt;&lt;/select&gt;").next();
  
                      for(var i = 0; i &lt; data.length; i++){
                          $parent.append("&lt;option value=" + data[i].id + "&gt;" + data[i].tr_adi + "&lt;/option&gt;");
                      }
                  }
              }
          });
      });
  });
  </code></pre>
  
  <p>Start HTML codes are follow:</p>
  
  <pre><code>&lt;div id="kategoriler"&gt;
      &lt;select&gt;
          &lt;option value="8"&gt;Rezervasyon&lt;/option&gt;
          &lt;option value="7"&gt;E-Concierge&lt;/option&gt;
          &lt;option value="6"&gt;Özel F?rsatlar&lt;/option&gt;
          &lt;option value="5"&gt;Safira SPA &amp;amp; Sa?l?k&lt;/option&gt;
          &lt;option value="4"&gt;Toplant? &amp;amp; Davetler&lt;/option&gt;
          &lt;option value="3"&gt;Yeme &amp;amp; ?çme&lt;/option&gt;
          &lt;option value="2"&gt;Odalar &amp;amp; Süitler&lt;/option&gt;
          &lt;option value="1"&gt;Genel Bak??&lt;/option&gt;
      &lt;/select&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>but in the console when i type follow code it's running:</p>
  
  <pre><code> $("select").change(function(){
        alert(2);
   });
  </code></pre>
  
  <p>from root select box select an option and after above code i type in console and select an option from new select box this codes did work and show alert message.</p>