Linked "Combos" not working correctly

Question

Fiddle: https://jsfiddle.net/Mrbaseball34/kuj2cz5g/

In the code, I call GetYears to fill a <ul> with data. When a year is clicked on, it is supposed to append the selected year to the text of the flyout then load the makes <ul> But, what is happening is it is "looping" through the years and calling yearClick for each year in the list after the that is clicked. Yes, it fills the makes <ul> but then begins looping yearClick() again.

Can anyone help out here? I can't see the forest for the trees, I guess...;-)

var year;
var make;
var model;
var ic;
GetYears();
$("#year-flyout").css("top", $(".m-assisted-decode").position().top);
$("#make-flyout").css("top", $(".m-assisted-decode").position().top  +  40).hide();
$("#model-flyout").css("top", $(".m-assisted-decode").position().top +  75).hide();
$("#parts-flyout").css("top", $(".m-assisted-decode").position().top + 112).hide();

function GetYears() {
    var data = 
[{"year":"2017"},{"year":"2016"},{"year":"2015"},{"year":"2014"},{"year":"2013"},{"year":"2012"},{"year":"2011"},{"year":"2010"},{"year":"2009"}];

    $.each(data, function(i, item) {
        $("#years").append("<li class=\"year\">" + item.year + "</li>");
        $(".year").on("click", yearClick);
    });
    $("#fa_year").hide();
    $("#year-flyout").show();
}
function yearClick(event) {
    year = $(this).text();
    $("#year_value").attr("placeholder", $("#year_value").attr("placeholder") + ":" + year);
    $("#year-flyout").hide();
    // Get the Makes and populate the Makes Flyout
    GetMakes();
}
function GetMakes() {
   var data = 
[{"make":"ACURA"},{"make":"AUDI"},{"make":"BMW"},{"make":"BUICK"},{"make":"CADILLAC"},{"make":"CHEVROLET"},{"make":"CHRYSLER"},{"make":"DODGE"},{"make":"FORD"},{"make":"GMC"},{"make":"HONDA"},{"make":"HUMMER"},{"make":"HYUNDAI"},{"make":"INFINITI"},{"make":"JAGUAR"},{"make":"JEEP"},{"make":"KIA"},{"make":"LAND ROVER"},{"make":"LEXUS"},{"make":"LINCOLN"},{"make":"MAZDA"},{"make":"MERCEDES-BENZ"},{"make":"MERCURY"},{"make":"MINI"},{"make":"NISSAN\/DATSUN"},{"make":"PONTIAC"},{"make":"PORSCHE"},{"make":"RAM"},{"make":"SAAB"},{"make":"SATURN"},{"make":"SCION"},{"make":"SMART"},{"make":"SUBARU"},{"make":"SUZUKI"},{"make":"TOYOTA"},{"make":"VOLKSWAGEN"},{"make":"VOLVO"}];
    $.each(data, function(i, item) {
        $("#makes").append("<li class=\"make\">" + item.make + "</li>");
        $(".make").on("click", makeClick);
    });
    $("#make-flyout").show();
}
function makeClick(event) {
    make = $(this).text();
    $("#make_value").attr("placeholder", $("#make_value").attr("placeholder") + ":" + make);
    $("#make-flyout").hide();
    // Get the Models and populate the Models Flyout
    // GetModels();
}

You're using the class to add the eventListener, so attaching it once will work for all of them — Skwal, Mar 30 '18 at 17:44
Possible duplicate of [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — Heretic Monkey, Mar 30 '18 at 18:01

Skwal · Accepted Answer · 2018-03-30T17:59:14.883

There's no need to attach the event listener after each added <li> since you're using the class. Just move it out of the each loop

$.each(data, function(i, item) {
    $("#years").append("<li class=\"year\">" + item.year + "</li>");
});
$(".year").on("click", yearClick);

If you inspect your year element in Chrome inspector, you can see all the attached events on click, and see that it was firing the same event several times.

Linked "Combos" not working correctly

1 Answers1