jquery - 连续.get（）请求失败

Question

我正在创建Year-Make-Model选择器。

最初，所有三个选择框都被禁用（并且没有选项）。基于通过.get（）运行的数据库查询的“年份”下拉加载，在瞬间加载。

选择一年后，会根据所选年份加载货物清单。这是它破坏的地方，而不是加载使得允许连续加载模型下的模型。

可视化：

[Years-----v] 
[-Make-----v] 
[-Model----v] 

选择一年

[1978------v] 
[Makes-----v] 
[-Model----v] 

这里是JavaScript我使用完成后此：

<script type="text/javascript"> 
    $(function() { 
     // LOAD YEARS 
     $.get("/ymm/get.php", { func: "get_years", select_name: "year_select" }, 
      function(data){ 
       $("#ymm_year_select").html(data); 
      }); 

     // LOAD MAKES 
     $("#year_select").on("change", function() { 
      var selected_value = $(this).val(); 

      $.get("/ymm/get.php", { func: "get_makes", select_name: "make_select", year: selected_value }, 
       function(data){ 
        $("#ymm_make_select").html(data); 
       }); 
     }); 

     // LOAD MODELS 
     $("#make_select").on("change", function() { 
      var selected_value = $(this).val(); 

      $.get("/ymm/get.php", { func: "get_models", select_name: "model_select", make: selected_value }, 
       function(data){ 
        $("#ymm_model_select").html(data); 
       }); 
     }); 

    }); 
</script> 

以供参考，在这里是什么/ymm/get.php看起来像：

<?php 
header("Expires: Mon, 26 Jul 1990 05:00:00 GMT"); 
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT"); 
header("Cache-Control: no-store, no-cache, must-revalidate"); 
header("Cache-Control: post-check=0, pre-check=0", false); 
header("Pragma: no-cache"); 

include("../includes/class/PhpConsole.php"); 
PhpConsole::start(); 
include("../includes/configure.php"); 
include("../includes/class/DB.class.php"); 

///////////////////////////////////////////////////////////////////////// 

function make_select($name, $data, $id = NULL) { 
$id = (NULL === $id ? $name : $id); 

?> 
<select name="<?=$name?>" id="<?=$id?>"> 
    <option>--Select--</option> 
    <?php 
     if(!empty($data)) { 
      foreach($data as $val => $display) { 
    ?> 
    <option value="<?=$val?>"><?=$display?></option> 
    <?php 
      } 
     } 
    ?> 
</select> 
<?php 
} 

$sql['get_years'] = "SELECT DISTINCT(`year`) FROM `ymm` WHERE `id` IN(SELECT `ymm` FROM `ymm_to_products` WHERE `products_id` IS NOT NULL AND `products_id` != '') ORDER BY `year` ASC"; 
$sql['get_makes'] = 'SELECT DISTINCT(`name`), `id` FROM `make` WHERE `id` IN(SELECT `make_id` FROM `ymm` WHERE `year`=%04d) ORDER BY `name` ASC'; 
$sql['get_models'] = 'SELECT DISTINCT(`name`), `id` FROM `model` WHERE `make_id`=(SELECT `id` FROM `make` WHERE `name` = \'%s\') ORDER BY `name`'; 

if(isset($_GET['func'])) { 
$func = trim($_GET['func']); 
$control_name = $_GET['select_name']; 

    switch($func) { 
     case 'get_years': 
     debug('YEARS!'); 
     $years = DB::select_all($sql['get_years']); 

     if(false !== $years && !empty($years)) { 
      foreach($years as $year) { 
       $year = intval($year['year']); 
       $data[$year] = $year; 
      } 
     } 

     make_select($control_name, $data); 
     die(); 
     break; 
     case 'get_makes': 
     debug('MAKES!'); 
     $year = (int) $_GET['year']; 
     $makes = DB::select_all(sprintf($sql['get_makes'], $year)); 

     if(false !== $makes && !empty($makes)) { 
      foreach($makes as $make) { 
       $name = $make['id']; 
       $data[$name] = $make['name']; 
      } 
     } 

     make_select($control_name, $data); 
     die(); 
     break; 
     case 'get_models': 
      debug('MODELS!'); 
      $make = strip_tags(trim($_GET['make'])); 
      $models = DB::select_all(sprintf($sql['get_models'], $make)); 

      if(false !== $models && !empty($models)) { 
      foreach($models as $model) { 
       $name = $model['id']; 
       $data[$name] = $model['name']; 
       } 
      } 

      make_select($control_name, $data); 
      die(); 
     break; 
    } 
} 

?> 

它加载make（和PhpConsole输出“YEARS！”，但从来没有“做！”或“MODELS！”。

我应该使用jQuery的.bind（）或.live（）吗？

---

我已经提供了对我自己问题的答案。

Answer 1

事实证明，我需要附上。对（）事件含有（父）元素，使其能“泡沫向下”或什么。由于目标元素是从之前的请求动态加载，它必须做这样：

... 
// LOAD MAKES 
$("#application-search").on("change", "#year_select", function() { 
var selected_value = $("#year_select").val(); 

$.get("/ymm/get.php", { func: "get_makes", select_name: "make_select", year: selected_value }, 
    function(data){ 
     $("#ymm_make_select").html(data); 
    }); 
}); 

// LOAD MODELS 
$("#application-search").on("change", "#make_select", function() { 
var selected_value = $("#make_select").val(); 

$.get("/ymm/get.php", { func: "get_models", select_name: "model_select", make: selected_value }, 
    function(data){ 
     $("#ymm_model_select").html(data); 
    }); 
}); 
... 

Answer 2

您是否使用jquery 1.7，因为.on函数是在1.7中添加的。如果您使用的是旧版本比试试这个，而不是

$("#make_select").change(function() { 
    // your existing stuff 
});