jQuery having trouble with a selector

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

-->

Step two is not showing. It appears that the model not being set. Why is this happening? In the demo click -> 2013, BMW, Series 7

This should set the model as Series 7 and load <div id="vehicle_part_2"> but it doesn't work.

DEMO: jsFiddle: http://jsfiddle.net/uLncL/1/

Answer 1

Your content is dynamically generated, you don't want to use "click", you should use "on":

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

This attaches the listener to body, and then when it is clicked it goes looking for your ID

Generally you don't want to attach to body as it's so high up the DOM, but in that example I can't see anything lower down to attach to.

Here's your fiddle fixed: http://jsfiddle.net/uLncL/2/