javascript/jquery更新多个选择框选项

我在一个页面上有三个选择框，当有人从第一个框中选择一个选项时，我想通过ajax更新第二个框的选项。当有人更新第二个框时，第三个框通过ajax获得新选项

我遇到的问题似乎是，当用户更新第一个框时，我检查数据库中我需要的选项，然后在php中创建新的选择框并替换原来的选择框。问题是，即使选择框的代码是相同的，id也是相同的，但在第二个框上观察更改的原始javascript不再工作

下面是cakephp/html，cake的所有工作都是创建选择框

    <table>
        <tr>
            <td class="threeCol"><?php echo $this->Form->input('industry', array('type'=>'select', 'options'=>$industries, 'empty'=>'Industry', 'id'=>'industry', 'class'=>'formInputSelect'));?></td>
            <td class="threeCol" id="cateWrap"><?php echo $this->Form->input('category', array('type'=>'select', 'options'=>$categories, 'empty'=>'Category', 'id'=>'category', 'class'=>'formInputSelect'));?></td>
            <td class="threeCol" id="courseWrap"><?php echo $this->Form->input('course', array('type'=>'select', 'options'=>$courses, 'empty'=>'Course', 'id'=>'course', 'class'=>'formInputSelect'));?></td>
        </tr>
    </table>

我使用的javascript：

<script type="text/javascript">
$(document).ready(function() {  
//Update categories dropdown when inustry selected
$("#industry").change(function() {
    if( this.value != "Industry" ) {
        $.post("<?php echo $this->webroot;?>categories/selectoptionsupdate", {id:this.value})
            .done(function (data) {
                $("#cateWrap").html(data);
            });
    } 
});
//Update course dropdown when category selected
$("#category").change(function() {
    if( this.value != "Category" ) {
        $.post("<?php echo $this->webroot;?>courses/selectoptionsupdate", {id:this.value})
            .done(function (data) {
                $("#courseWrap").html(data);
            });
    } 
});

})；

最后是创建新框的php

//UPdate the options for the dropdown on post new job page
function selectoptionsupdate() {
    if ($this->request->is('ajax')) {   
        $this->layout = 'ajax';
        $id = $this->request->data['id'];
        $options = $this->Course->find('list', array('conditions'=>array('Course.category_id'=>$id)));
        $result = '';
        $result .= '<select name="data[Job][course]" id="course" class="formInputSelect">';
        $result .= '<option value="">Course</option>';
        foreach($options as $k=>$v) {
            $result .= '<option value="'.$k.'">'.$v.'</option>';
        }
        $result .= '</select>';
        echo 'hey';
    }
}

解决这个问题的最好办法是什么？

换行

$("#industry").change(function() {
$("#category").change(function() {

用于：

---

不客气。您可以阅读以更好地理解事件委派。但基本上，您更改了包含事件的html，因此事件丢失。这就是为什么您的代码在第一次工作，但在第二次失败。

$(document).on("change", "#industry", function() {
$(document).on("change", "#category", function() {