Rebinding the events

Problem/Motivation

Steps to reproduce

I have two select element
1. Practice
2. Location

chosen is working fine when first time loading the page.
But my requirement is to rebuild the second (Location) dropdown on the basis of the selected value of the first (Practice) dropdown.
For that on change of the value of $(' .chosen-single span').on('DOMSubtreeModified',function(){}); I am calling an ajax function to get the refined values and updating the options. But the events are not getting triggered after dynamically change the value. Below is my javascript code.

(function($){

$(document).ready(function() {

$('#edit_from_practice_id_chosen .chosen-single span').on('DOMSubtreeModified',function(){
var spanval = $('#edit_from_practice_id_chosen .chosen-single span').text();

$.ajax({
type: 'POST',
url: '/qa/practice/location',
data: {
"practice_name": spanval
},
success: function(result){
var rs = result.split("||");

var $select = $("#edit-from-extid");
$select.empty();
$select.html(rs[0]);

$('#edit_from_extid_chosen .chosen-drop ul').remove();
$('#edit_from_extid_chosen .chosen-drop').append('

'+rs[1]+'

');
//$('#edit_from_extid_chosen .chosen-drop ul').listview('refresh');
//$("#edit_from_extid_chosen").trigger("chosen:updated");

//$("#edit_from_extid_chosen").bind("register_observers");

}
});

})

});

})(jQuery)

Proposed resolution

Remaining tasks

Rebinding the events to the dynamically changed values

User interface changes

API changes

Data model changes