php - on change not working in nested dropdown list -

hello want display data of business3's data according business2's , business2's data according business1's dropdown list on change() of business1 got data in response i didn't second on change() in dropdown list.

<!-- ajax code first business starts here -->              <script>                     $(document).on('change', 'select.business1', function(){                            var business1 = $('select.business1 option:selected').val();                            alert(business1);                            var value = $(this).val();                             $.ajax({                                 type:"post",                                 data: { business1:business1 },                                 url: '<?php echo site_url('client_area/select_business_sub_cat'); ?>',                                 success : function (data){                                          $('#business2').empty();                                         $('#business2').append(data);                                 }                            });                     });             </script>   <!-- ajax code first business ends here --> 

// script not working. can't find second change event.

<!-- ajax code second business starts here -->              <script>                     $(document).on('change','#business2',function(){                     alert('change happened');                     });             </script>   <!-- ajax code second business ends here --> 

i have tried live() method alert called on first dropdown selection , ajax request calls second drop down fills (alternate second script) ,

<script>                    $(document).live('change', '#business2', function() {                       alert('change happened');                     }); </script> 

model function

public function select_business_sub_cat()     {         $business1 = $this->input->post('business1');         $result_sub_cat1 = $this->db->query("select category.id,subcategory.* category left join subcategory on category.id = subcategory.category_id category.id = '$business1'");         $row_cat1 = $result_sub_cat1->result();          $data = array(             'id' => $row_cat1['0']->id,             'name' => $row_cat1['0']->name             );         echo "<option value='" . $row_cat1['0']->id . "'>" . $row_cat1['0']->name . "</option>";          // return $this->output->set_output($data);       } 

view --

<div class="form-group">                                 <label>business 1</label>                                 <select name="txtbusiness1" id="" style="height: 30px;width: 100%;" class="business1">                                                  <option value=""> select business </option>                                                  <?php                                                   $result_cat1 =  $this->db->query("select * category");                                                  $row_cat1 = $result_cat1->result();                                                  ?>                                                 <?php foreach($row_cat1 $item){ ?>                                                 <option value="<?php echo $item->id; ?>"><?php echo $item->name; ?></option>                                                 <?php } ?>                                 </select>                                                  </div>                          <div class="form-group">                                 <label>business 2</label>                                 <select name="txtbusiness2" id="business2" style="height: 30px;width: 100%;" class="business2">                                                  <option value=""> select business2 </option>                                 </select>                                                  </div>                          <div class="form-group">                                 <label>business 3</label>                                 <select name="txtbusiness4" id="business3" style="height: 30px;width: 100%;" class="business3">                                                  <option value=""> select business3 </option>                                                  <?php echo $abc; ?>                                 </select>                                                  </div> 

maybe that's because calling $('#business2').html(data); remove event handlers, jquery documentation: http://api.jquery.com/html

when .html() used set element's content, content in element replaced new content. additionally, jquery removes other constructs such data , event handlers child elements before replacing elements new content.

one option use empty , append this

$('#business2').empty(); $('#business2').append(data); 

instead of $('#business2').html(data);