jQuery on（'change'）无效

Question

I'm working with ajax forms where based on a select element value change, an ajax request is sent to the server, then in response a json string is returned. I build the second form based on this json string. the problem is I want to make a third select element based on second select element value change(the one that is generated via javascript). in this situation when i want to work with change event, it doesn't work:

My javascript code so far:

jQuery("#make").on('change',function(){
        var value = jQuery(this).val();
        if(value != 0)
        {
            jQuery.getJSON("<?php echo site_url('ajax/get/models'); ?>",
                {makeId:value},
                function(data){
                    if(data != "false")
                    {
                        var modelsSelect = document.createElement('select');
                        modelsSelect.setAttribute('name','model');
                        modelsSelect.setAttribute('id','model');
                        var modelOption =  document.createElement('option');
                        modelOption.setAttribute('value',0);
                        modelOption.appendChild(document.createTextNode("sample text"));
                        modelsSelect.appendChild(modelOption);
                        jQuery.each(data, function(index, item) {
                            var modelOption =  document.createElement('option');
                            modelOption.setAttribute('value',item.id);
                            modelOption.appendChild(document.createTextNode(item.model.toString()));
                            modelsSelect.appendChild(modelOption);
                        });
                        jQuery("#model").replaceWith(modelsSelect);
                        return false;
                    }
                    else
                    {
                        return false;
                    }
                }
            );
        }
        else
        {
            var modelsSelect = document.createElement('select');
            modelsSelect.setAttribute('name','model');
            modelsSelect.setAttribute('id','model');
            modelsSelect.setAttribute('disabled','disabled');
            var modelOption =  document.createElement('option');
            modelOption.setAttribute('value',0);
            modelOption.appendChild(document.createTextNode("sample text"));
            modelsSelect.appendChild(modelOption);
            jQuery("#model").replaceWith(modelsSelect);
            return false;
        }
    });
    jQuery("#model").on('change',function(){
        alert("change");// THIS DOES NOT WORK
        return false;
    });

Answer 1

You'll need a delegated event handler for that as you're replacing #model with a new dynamic element :

jQuery(document).on('change', '#model', function(){
    alert("change");
    return false;
});