on change not working in nested dropdown list - php

Question

hello i want to display data of business3's data according to business2's and business2's data according to business1's dropdown list but on change() of business1 i got data in response but I didn't get second on change() in dropdown list.
<!-- ajax code for 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 for first business ends here -->
// This script is not working. i can't find second change event.
<!-- ajax code for second business starts here -->
<script>
$(document).on('change','#business2',function(){
alert('Change Happened');
});
</script>
<!-- ajax code for second business ends here -->
I have tried with live() method also so alert called on first dropdown selection and then the ajax request calls so second drop down fills (Alternate for 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.* From category LEFT JOIN subcategory ON category.id = subcategory.category_id where 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 * from category");
$row_cat1 = $result_cat1->result();
?>
<?php foreach($row_cat1 as $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>

Answer 1

Maybe that's because by calling $('#business2').html(data); you remove the event handlers, from jQuery documentation: http://api.jquery.com/html
When .html() is used to set an element's content, any content that was
in that element is completely replaced by the new content.
Additionally, jQuery removes other constructs such as data and event
handlers from child elements before replacing those elements with the
new content.
One option would be to use empty and append like this
$('#business2').empty();
$('#business2').append(data);
instead of $('#business2').html(data);

Answer 2

The Script which is not working for you !!!
<script>
$(document.body).on('change','#business2',function(){
alert('Change Happened');
});
</script>
Try this in place of the above script :
$(document).on("change", "#business2", function(){
alert('Change Happened');
});