Javascript jQuery在选择器方面遇到问题

HTML

<!-- YEAR -->
<div id="vehicle_year">
  <h3>Vehicle Year</h3>

  <table id="year" class="vehicle_options">
      <tbody><tr>
        <td id="2015">2015</td>
        <td id="2014">2014</td>
        <td id="2013">2013</td>
        <td id="2012">2012</td>
        <td id="2011">2011</td>
      </tr>
      <tr>
        <td id="2010">2010</td>
        <td id="2009">2009</td>
        <td id="2008">2008</td>
        <td id="2007">2007</td>
        <td id="2006">2006</td>
      </tr>
  </tbody></table>
<span id="year_selected"></span> 
</div>

<!-- MAKE -->
<div id="vehicle_make" style="display: none">
  <h3>Vehicle Make</h3>

  <table id="make" class="vehicle_options">
      <tbody><tr>
        <td id="AM General">AM General</td>
        <td id="Acura">Acura</td>
        <td id="Alfa Romeo">Alfa Romeo</td>
        <td id="Aston Martin">Aston Martin</td>
        <td id="Audi">Audi</td>
      </tr>
      <tr>
        <td id="BMW">BMW</td>
        <td id="Bentley">Bentley</td>
        <td id="Bugatti">Bugatti</td>
        <td id="Buick">Buick</td>
        <td id="Cadillac">Cadillac</td>
      </tr>
  </tbody></table>
<span id="make_selected"></span> 
</div>


<!-- MODEL -->
<div id="vehicle_model" style="display: none">
  <h3>Vehicle Model</h3>

  <table id="model" class="vehicle_options">
        <!-- model options -->
  </table>
<span id="model_selected"></span> 
</div>

<!-- VEHICLE PART 2 QUESTIONS -->
<div id="vehicle_part_2" style="display: none;">
  SHOW THIS DIV - NOT WORKING - MODEL IS NOT BEING SET
</div>

车辆年
2015
2014
2013
2012
2011
2010
2009
2008
2007
2006
车辆制造
我是将军
阿库拉
阿尔法罗密欧
阿斯顿马丁
奥迪
宝马
宾利
布加迪
别克
卡迪拉克
车型
显示此DIV-不工作-未设置模型

jQuery

//select year, model, make
function selectVehicle(id, current_options, selected, next_option, build_models) {
  $(id).click(function() {
    var select = $(this).text();
    $(current_options).hide();
    var vehicle_make = $(selected).html(select).show();
    $(next_option).fadeIn();

    if (build_models)
      generateModelsList(model_hash[vehicle_make.html()]);
  });  
}

function generateModelsList(model_list) {
    var pageSize = 5;
    var pageCount = model_list.length / pageSize;

    for (var page = 0; page < pageCount; page++) {
        var pageElements = model_list.slice(page * pageSize, (page + 1) * pageSize);
        debugger;
        var newTr = $('<tr>');
        $.each(pageElements, function (index, value) {
            $('<td>', {
                text: value,
                id:   value
            }).appendTo(newTr);
        });

        newTr.appendTo('#model');
    }
}

$(document).ready(function() {
  selectVehicle('#year tr td', '#year', '#year_selected', '#vehicle_make');
  selectVehicle('#make tr td', '#make', '#make_selected', '#vehicle_model', true);
  selectVehicle('#model tr td', '#model', '#model_selected', '#vehicle_part_2');
});

model_hash = {"AM General":["Hummer"], "Acura":["CL", "ILX", "ILX Hybrid", "Integra", "Legend", "MDX", "NSX", "RDX", "RL", "RLX", "RSX", "SLX", "TL", "TLX", "TSX", "TSX Sport Wagon", "Vigor", "ZDX"], "Alfa Romeo":["4C"], "Aston Martin":["DB7", "DB9", "DBS", "Rapide", "Rapide S", "V12 Vanquish", "V12 Vantage", "V8 Vantage", "Vanquish", "Virage"], "Audi":["100", "200", "80", "90", "A3", "A3 e-tron", "A4", "A5", "A6", "A7", "A8", "Cabriolet", "Coupe", "Q1", "Q3", "Q5", "Q7", "R8", "RS 4", "RS 5", "RS 6", "RS 7", "S3", "S4", "S5", "S6", "S7", "S8", "SQ5", "TT", "TT RS", "TTS", "V8", "allroad", "allroad quattro"], "BMW":["1 Series", "1 Series M", "2 Series", "3 Series", "3 Series Gran Turismo", "4 Series", "4 Series Gran Coupe", "5 Series", "5 Series Gran Turismo", "6 Series", "6 Series Gran Coupe", "7 Series", "8 Series", "ALPINA B7", "ActiveHybrid 5", "ActiveHybrid 7", "ActiveHybrid X6", "Alpina", "M", "M3", "M4", "M5", "M6", "M6 Gran Coupe", "X1", "X3", "X4", "X5", "X5 M", "X6", "X6 M", "Z3", "Z4", "Z4 M", "Z8", "i3", "i8"], "Bentley":["Arnage", "Azure", "Azure T", "Brooklands", "Continental", "Continental Flying Spur", "Continental Flying Spur Speed", "Continental GT", "Continental GT Speed", "Continental GTC", "Continental GTC Speed", "Continental Supersports", "Continental Supersports Convertible", "Flying Spur", "Mulsanne", "Supersports Convertible ISR"], "Bugatti":["Veyron 16.4"]};

-->

//选择年份、型号、品牌
功能选择车辆（id、当前选项、选定、下一个选项、构建型号）{
$（id）。单击（函数（）{
var select=$（this.text（）；
$（当前_选项）.hide（）；
var vehicle_make=$（选中）.html（选中）.show（）；
$（下一个选项）.fadeIn（）；
if（构建模型）
generateModelsList（model_hash[vehicle_make.html（））；
});  
}
函数生成器模型列表（模型列表）{
var pageSize=5；
var pageCount=型号列表。长度/页面大小；
对于（var page=0；页面<页面计数；页面++）{
var pageElements=model_list.slice（页面*页面大小，（页面+1）*页面大小）；
调试器；
var newTr=$（''）；
$.each（页面元素、函数（索引、值）{
$('', {
文本：值，
id:值
}).附录（NETTR）；
});
新的附录（“#模型”）；
}
}
$（文档）.ready（函数（）{
选择车辆（'year tr td'、'year'、'year'、'year_selected'、'vehicle_make'）；
选择车辆（'make tr td'、'make'、'make#u selected'、'vehicle#u model'，true）；
选择车辆（“#tr td型”、“#model”、“#model”、“所选车型”、“车辆零件2”）；
});
model_hash={“AM General”：[“Hummer”]，“Acura”：[“CL”，“ILX”，“ILX Hybrid”，“Integra”，“Legend”，“MDX”，“NSX”，“RDX”，“RL”，“RLX”，“RSX”，“SLX”，“TL”，“TLX”，“TSX”，“TSX运动车”，“活力”，“ZDX”]，“Alfa Romeo”：[“4C”]，“阿斯顿马丁”：[“DB7”，“DB9”，“DBS”，“Rapide”，“Rapide S”，“V12 Vanquish”，“V12 Vantage”，“V8 Vantage”，“Vanquish”，“Virage”]，“奥迪”：[“100”、“200”、“80”、“90”、“A3”、“A3 e-tron”、“A4”、“A5”、“A6”、“A7”、“A8”、“Cabriolet”、“Coupe”、“Q1”、“Q3”、“Q5”、“Q7”、“R8”、“RS 4”、“RS 5”、“RS 6”、“RS 7”、“S3”、“S4”、“S5”、“S6”、“S7”、“S8”、“SQ5”、“TT”、“TT RS”、“TTS”、“V8”、“allroad”、“allroad quattro”]、“BMW:[“1系”、“1系”、“1系M”、“2系”、“3系”、“3系格兰赛车”“，”4系“，”4系“，”5系“，”5系“，”6系“，”6系“，”7系“，”8系“，”阿尔皮纳B7“，”有源混合动力5“，”有源混合动力7“，”有源混合动力X6“，”阿尔皮纳“，”M“，”M“，”M3“，”M4“，”M5“，”M6“，”M“，”X1”，“X3”，“X4”，“X4”，“X5”，“X6”，“X6”，“M”，“Z3”，“Z4”，“Z4”，“Z8”]，“宾利”：[“雅致”、“天蓝”、“天蓝T”、“布鲁克兰”、“大陆”、“大陆飞马”、“大陆飞马速度”、“大陆GT”、“大陆GT速度”、“大陆GTC”、“大陆GTC速度”、“大陆超级运动”、“大陆超级运动敞篷车”、“飞马”、“穆尔桑”、“超级运动敞篷ISR”]、“布加迪”“：[“威龙16.4”]}；
-->

第二步没有出现。似乎未设置

型号

。为什么会这样？在演示中，单击->

2013，宝马7系

这应该将模型设置为

系列7

并加载

，但它不起作用

演示：jsFiddle:

---

您的内容是动态生成的，您不想使用“单击”，您应该使用“打开”：

这会将侦听器附加到主体，然后单击它时，它会查找您的ID

通常情况下，您不希望附加到body，因为它在DOM中的位置非常高，但在该示例中，我看不到任何较低的位置可以附加到body

---

你的小提琴修好了：

谢谢你的作品。你能给我看看更干净的解决办法吗。我正在学习jQuery，但并不完全确定最佳实践。你是如何实现上述代码的？结果是一样的，但是如果没有所有的选择器，阅读起来就容易多了：嘿，这太干净了。谢谢你的帮助和在线评论+1.

  $('body').on('click', id, function() {