jQuery binding - how can I bind the result of this Ajax call to the document?

Question

I am doing this:

jQuery("#country_id").change(function() {
    id = jQuery("#country_id").val();
    jQuery.ajax({
        type: "GET",
        url: 'index.php?option=com_jomdirectory&task=getprovince&format=raw&type=province',
        dataType: "html",
        data: "id=" + id,
        success: function(data) {
            jQuery('#provincelist').html(data).find('select').addClass("form-control chosen-select").chosen();
        }
    });
});

The problem is, this is not binding to the document, so when I try to fire the next ajax call (which retrieves a list of cities),

I essentially have 3 selects:

1) Country - onchange fires ajax call to get provinces (This works and gives me the Province select list)

2) Then when changing Province, it should fire an ajax call for city select

3) City ajax call doesn't fire.

How do I go about binding the result to the document, so that I can fire the next ajax call on change, without fiddling with this piece of code too much?

Thanks,

J

Answer 1

@PraveenKumar My next ajax call does not fire, because it is itself the result of an ajax call. I essentially have 3 selects: 1) Country->Province->City and it works when I change country (the province select shows) but when I change province, nothing happens - the ajax call for city does not fire.

you need to use event delegation for your province select.

jQuery("#provincelist").on('change', '#province_id', function() {

when you are replacing the select using jQuery('#provincelist').html(data) you are losing the change event on the province select as you are replacing the whole element.