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