title: Why the jQuery classes are not working for the HTML elements generated from AJAX response?
body: <p>I'm using PHP, jQuery, Smarty, etc. for my website. I'm having a HTML form. In this form there is a select control and couple of calendar controls. Some classes are added to these controls to achieve some javascript functionality. When the form loads for the first time the classes applied to these controls work but when I append the same controls with the same classes applied to them, the javascript functionality doesn't work. Why this is happening and how to resolve this issue? For your reference I'm putting below the small snippets of codes:
  HTML Code:</p>
  
  <pre><code>&lt;input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date[1]" id="rebate_start_date_1" value="{$data.rebate_start_date}"&gt;
  &lt;input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date[1]" id="rebate_expiry_date_1" value="{$data.rebate_expiry_date}"&gt;
  &lt;select class="states" multiple="multiple" name="applicable_states[1]" id="applicable_states_1"&gt;
  &lt;option value="1"&gt;Alabama&lt;/option&gt;
  &lt;option value="2"&gt;Alaska&lt;/option&gt;
  &lt;option value="3"&gt;Arizona&lt;/option&gt;
  &lt;option value="4"&gt;Arkansas&lt;/option&gt;
  &lt;option value="5"&gt;California&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The AJAX response from PHP file is as follows:</p>
  
  <pre><code>$rebate_no = $_POST['rebate_no'];
   $states = '';
        foreach ($state_list as $key =&gt; $value) {
          $states .= "&lt;option value=".$value['id']."&gt;".$value['state_name']."&lt;/option&gt;";
        }
  &lt;input class='form-control date_control' placeholder='yyyy-mm-dd' type='date' name='rebate_start_date[$rebate_no]' id='rebate_start_date_$rebate_no' value=''&gt;
  &lt;input class='form-control date_control' placeholder='yyyy-mm-dd' type='date' name='rebate_expiry_date[$rebate_no]' id='rebate_expiry_date_$rebate_no' value=''&gt;
  &lt;select class='states' multiple='multiple' name='applicable_states[$reabate_no]' id='applicable_states_$reabate_no'&gt;
                      $states    
                      &lt;/select&gt;
  </code></pre>
  
  <p>The actual code is very large. I've put in only small and necessary part of my code. Would you please help me in this regard please? Thanks in advance.
  The jQUery AJAX function code is below:</p>
  
  <pre><code>$(function() {
    $(".add_new_rebate").on("click", function(event) {
      event.preventDefault();
      var manufacturer_id =  $("#company_id").val();
  
      /*if($.active &gt; 0) { //or $.active      
        request_inprogress();
      } else {*/  
        var next_rebate_no = $('.rebate_block').length + 1;
        var rebate_no      = $('.rebate_block').length + 1;
  
      if ($('.rebate_block').length&gt;0) { 
        rebate_no = rebate_no+1;
      }
  
        $('.add_new_rebate').attr('disabled','disabled');
      //}
  
      $.ajax({
        type: "POST",
        url: "add_rebate_by_product.php",
        data: {'request_type':'ajax', 'op':'create_rebate', 'next_rebate_no':next_rebate_no, 'rebate_no':rebate_no, 'manufacturer_id':manufacturer_id},  
        beforeSend: function() { 
          $('.table-responsive').after("&lt;img src='http://localhost/smart-rebate-web/web/img/ajax-loader.gif' class='load' alt='Loading...'&gt;");
        },
        success: function(data) {
          if(jQuery.trim(data)=="session_time_out") {
          window.location.href = site_url+'admin/login.php?timeout=1';                
          } else {
            $('.rebate_block').append(data);
            $('.add_new_rebate').removeAttr('disabled');
          }
          $('.load').remove();
        }
      });    
   });   
  });
  </code></pre>