jQuery的具有與選擇器

Question

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> 

的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"]}; 

--> 

第二步沒有顯示的麻煩。看起來model沒有被設置。這是爲什麼發生？在演示點擊 - >2013, BMW, Series 7

這應該將模型設置爲Series 7和加載<div id="vehicle_part_2">但它不起作用。

DEMO：的jsfiddle：http://jsfiddle.net/uLncL/1/

Answer 1

你的內容是動態生成的，你不希望使用 「點擊」，就應該 「的」 使用方法：

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

這華武官聽衆正文，然後當它被點擊時它會去尋找你的ID

通常你不會想要附加到正文，因爲它的DOM高度高，但在該示例中，我看不到任何更低的附加內容。

這是你的小提琴固定：http://jsfiddle.net/uLncL/2/