Javascript jQuery on（'；change'；）不'；行不通

我正在使用ajax表单，其中基于select元素值的更改，向服务器发送ajax请求，然后返回json字符串作为响应。我基于这个json字符串构建第二个表单。问题是我想根据第二个select元素的值更改（通过javascript生成的值）生成第三个select元素。在这种情况下，当我想使用更改事件时，它不起作用：

到目前为止，我的javascript代码：

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;
    });

jQuery（#make”）.on（'change'，function（）{
var value=jQuery（this.val（）；
如果（值！=0）
{
jQuery.getJSON（“，
{makeId:value}，
功能（数据）{
如果（数据！=“假”）
{
var modelsSelect=document.createElement（'select'）；
modelsSelect.setAttribute（'name'，'model'）；
modelsSelect.setAttribute（'id'，'model'）；
var modelpoption=document.createElement（'option'）；
modelOption.setAttribute（'value'，0）；
appendChild（document.createTextNode（“示例文本”）；
modelsSelect.appendChild（modelOption）；
每个（数据、函数（索引、项）{
var modelpoption=document.createElement（'option'）；
modelOption.setAttribute（'value'，item.id）；
appendChild（document.createTextNode（item.model.toString（））；
modelsSelect.appendChild（modelOption）；
});
jQuery（“#model”）.replacetwith（modelsSelect）；
返回false；
}
其他的
{
返回false；
}
}
);
}
其他的
{
var modelsSelect=document.createElement（'select'）；
modelsSelect.setAttribute（'name'，'model'）；
modelsSelect.setAttribute（'id'，'model'）；
modelsSelect.setAttribute（'disabled'，'disabled'）；
var modelpoption=document.createElement（'option'）；
modelOption.setAttribute（'value'，0）；
appendChild（document.createTextNode（“示例文本”）；
modelsSelect.appendChild（modelOption）；
jQuery（“#model”）.replacetwith（modelsSelect）；
返回false；
}
});
jQuery（“#model”）.on（'change'，function（）{
警报（“更改”）；//这不起作用
返回false；
});

在用新的动态元素替换

#model

时，您需要一个委托事件处理程序：

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

---

这是正确的。但是你能解释一下原因吗？我应该对我想要处理其事件的每个元素使用这种语法吗？你应该用最接近的非动态父级的#model替换

document

，是的，对于动态添加的元素，这是委派事件处理程序的方法，在我回答之前，我开始重写你的大部分代码，但这太多的工作了，但下面是我所做的->如果它能帮助你？