How to apply the jQuery classes to HTML elements generated through AJAX response so that the jQuery functionality should be workable?

Question

I'm using PHP, jQuery for my website. I've following HTML elements which are present on the page when the page loads.

//Date picker controls
<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_start_date[1]" id="rebate_start_date_1" value="">
<input class="form-control date_control" placeholder="yyyy-mm-dd" type="date" name="rebate_expiry_date[1]" id="rebate_expiry_date_1" value="">
//Select control
<select class="states" multiple="multiple" name="applicable_states[1]" id="applicable_states_1">
  <option value="1">Alabama</option>
  <option value="2">Alaska</option>
  <option value="3">Arizona</option>
  <option value="4">Arkansas</option>
  <option value="5">California</option>
</select>

In the above code, I've added jQuery classes to the HTML controls to make the jQuery functionality workable.

1. .date_control for two date picker controls
2. .states for select control

The jQuery code for above HTML elements with the above specified classes is as follows:

$(document).ready(function() {
  //code for datepicker
  $(".date_control").datepicker({
    dateFormat: "yy-mm-dd"
  });
  //code for states
  $('.states').multiselect({
    includeSelectAllOption: true,
    maxHeight: 150
  });
});

Now on click of a button present on a page I'm calling AJAX function as follows.

<button style="float:right" class="add_new_rebate" type="button" class="btn btn-default" onclick="add_rebate_by_product(); return false;"><i class="icon-plus"></i> &nbsp;Add New Rebate</button>

Then in AJAX function I'm giving call to a PHP file. In PHP file I'm making the response and sending it back to the AJAX request. Till here everything works fine. But the issue I'm facing is the non-working of jQuery functionality on the HTML controls I added through AJAX response. I've taken care of adding the same classes as above while preparing the PHP response. Even if I check the source HTML by inspecting the respective HTML elements, the jQuery classes are present over there but functionality is still not working. For your reference I'm giving below the AJAX request code and the response preparation code from PHP file:

//AJAX request code
function add_rebate_by_product() { 
    var manufacturer_id =  $("#company_id").val();

    var next_rebate_no = $('.rebate_block').length + 1;
    var rebate_no      = $('.rebate_block').length + 1;

    if ($('.rebate_block').length>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("<img src='http://localhost/smart-rebate-web/web/img/ajax-loader.gif' class='load' alt='Loading...'>");
      },
      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();
      }
    });
}


//PHP code snippet to prepare response
    <?php
    $op = $_REQUEST['op'];
    switch( $op ) {
     case "create_rebate": 
    echo "<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=''><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=''>
    <select class='states' multiple='multiple' name='applicable_states[$reabate_no]' id='applicable_states_$reabate_no'>
      <option value='1'>Alabama</option>
      <option value='2'>Alaska</option>
      <option value='3'>Arizona</option>
      <option value='4'>Arkansas</option>
      <option value='5'>California</option>    
    </select>";
    exit;
    }
    ?>

I googled a lot about this but still couldn't get the perfect solution which could make the jQuery functionality workable for HTML controls added using AJAX. So can anyone please help me in this regard? Thanks for spending some of your valuable time in understanding my issue. If you need any kind of information regarding the question I can provide you the same. Any kind of help, comments, suggestions, answers will be highly appreciated. Waiting for your precious replies.

Answer 1

Wrap the initialization code in a function:

function initializeControls(){
  //code for datepicker
  $(".date_control").datepicker({
    dateFormat: "yy-mm-dd"
  });
  //code for states
  $('.states').multiselect({
    includeSelectAllOption: true,
    maxHeight: 150
  });
}

Then call it in your ajax callback:

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');
      initializeControls();
    }
    $('.load').remove();
 }