jQuery .on event not triggering for appended items

Question

I have a for where a user selects a year from a dropdown list - who's id is "newCarYear_1". When the user selects a year, it populates the choices for the second dropdown, "newCarMake_1". After the make is selected, the select options for "newCarModel_1" are populated. It works fine, except for when the user hits the "Add a car" button and "newCarYear_2", "newCarMake_2", and "newCarModel_3" are added, the selects aren't populated for the make and model. Here's my code for the on change:

$('[id^="newCarYear_"]').on("change", function() {
    var thisid = "#" + $(this).attr('id');
    var year = $(thisid).val();
    $(thisid.replace("Year", "Make") + " option").remove();
    $.get("./ajax/getCarMakes.php", { year: year }, function(data) {
            $(thisid.replace("Year", "Make")).append(data);
    });
});

And here's the code for when the user hits the "Add a car" button:

$("#addNewCar").click(function() {
    newCarNum++; // declared elsewhere in my js script - set to 1 when page loads
    var globalLoanLength = $("#globalLoanLength").val();
    var globalAPR = $("#globalAPR").val();

    var insertString = "<tr"; if (newCarNum % 2 == 0) insertString = insertString + " style='background-color:#f8f8f8'"; insertString = insertString + "><td><span style='line-height:34px;'>Year:</span> <select id='newCarYear_" + newCarNum + "' name='newCarYear_" + newCarNum + "' style='position:relative; top: 5px; width:89px;'><option value=''>-- Year --</option><?php for ($j = 0; $j < count($carYears); $j++) echo "<option value='" . $carYears[$j]['year'] . "'>" . $carYears[$j]['year'] . "</option>"; ?></select> <span style='line-height:34px;'>Make:</span> <select id='newCarMake_" + newCarNum + "' name='newCarMake_" + newCarNum + "' style='position:relative; top: 5px; width:160px;'><option value=''>-- Make --</option></select> <span style='line-height:34px;'>Model:</span> <select id='newCarModel_" + newCarNum + "' name='newCarModel_" + newCarNum + "' style='position:relative; top: 5px; width:160px;'><option value=''>-- Select A Make--</option></select> <span style='line-height:34px;'>Trim:</span> <select id='newCarTrim_" + newCarNum + "' name='newCarTrim_" + newCarNum + "' style='position:relative; top: 5px; width:160px;'><option value=''>-- Select A Model --</option></select> <span style='line-height:34px;'>Sale Price:</span> <input id='newCarSalePrice_" + newCarNum + "' name='newCarSalePrice_" + newCarNum + "' type='text' placeholder='-- Sale Price --' style='position:relative; top:5px; width:80px;' onkeyup=\"this.value = this.value.replace(/[^.0-9]/gi,'');\" /> <span style='line-height:34px;'>VIN:</span> <input id='newCarVIN_" + newCarNum + "' name='newCarVIN_" + newCarNum + "' type='text' placeholder='-- VIN --' style='position:relative; top:5px; width:85px;' /> <span style='line-height:34px;'>Stock Number:</span> <input id='newCarStockNumber_" + newCarNum + "' name='newCarStockNumber_" + newCarNum + "' type='text' placeholder='-- Stock Num --' style='position:relative; top:5px; width:80px;' /> <span style='line-height:34px;'>Loan Length:</span> <input id='newCarLoanLength_" + newCarNum + "' name='newCarLoanLength_" + newCarNum + "' type='text' value='" + globalLoanLength + "' placeholder='Loan Length' style='position:relative; top: 5px; width:50px;' /> <span style='line-height:34px;'>APR:</span> <input id='newCarAPR_" + newCarNum + "' name='newCarAPR_" + newCarNum + "' type='text' value='" + globalAPR + "' placeholder='-- APR --' style='position:relative; top: 5px; width:50px;' /></td></tr>";

    $("#newCarTable tr").eq(-2).before(insertString);

    if (newCarNum % 2 == 0)
            $("#newCarsSubmitRow").css("background-color", "#ffffff");
    else
            $("#newCarsSubmitRow").css("background-color", "#f8f8f8");
});

I can't figure out why an added car isn't triggering the .on declaration.

score 2 · Accepted Answer · answered Jun 03 '13 at 01:42

try this

$(document).on("change",'[id^="newCarYear_"]', function() {
    var thisid = "#" + $(this).attr('id');
    var year = $(thisid).val();
    $(thisid.replace("Year", "Make") + " option").remove();
    $.get("./ajax/getCarMakes.php", { year: year }, function(data) {
            $(thisid.replace("Year", "Make")).append(data);
    });
});




  $(document).on("click","#addNewCar",function() {
newCarNum++; // declared elsewhere in my js script - set to 1 when page loads
var globalLoanLength = $("#globalLoanLength").val();
var globalAPR = $("#globalAPR").val();

var insertString = "<tr"; if (newCarNum % 2 == 0) insertString = insertString + " style='background-color:#f8f8f8'"; insertString = insertString + "><td><span style='line-height:34px;'>Year:</span> <select id='newCarYear_" + newCarNum + "' name='newCarYear_" + newCarNum + "' style='position:relative; top: 5px; width:89px;'><option value=''>-- Year --</option><?php for ($j = 0; $j < count($carYears); $j++) echo "<option value='" . $carYears[$j]['year'] . "'>" . $carYears[$j]['year'] . "</option>"; ?></select> <span style='line-height:34px;'>Make:</span> <select id='newCarMake_" + newCarNum + "' name='newCarMake_" + newCarNum + "' style='position:relative; top: 5px; width:160px;'><option value=''>-- Make --</option></select> <span style='line-height:34px;'>Model:</span> <select id='newCarModel_" + newCarNum + "' name='newCarModel_" + newCarNum + "' style='position:relative; top: 5px; width:160px;'><option value=''>-- Select A Make--</option></select> <span style='line-height:34px;'>Trim:</span> <select id='newCarTrim_" + newCarNum + "' name='newCarTrim_" + newCarNum + "' style='position:relative; top: 5px; width:160px;'><option value=''>-- Select A Model --</option></select> <span style='line-height:34px;'>Sale Price:</span> <input id='newCarSalePrice_" + newCarNum + "' name='newCarSalePrice_" + newCarNum + "' type='text' placeholder='-- Sale Price --' style='position:relative; top:5px; width:80px;' onkeyup=\"this.value = this.value.replace(/[^.0-9]/gi,'');\" /> <span style='line-height:34px;'>VIN:</span> <input id='newCarVIN_" + newCarNum + "' name='newCarVIN_" + newCarNum + "' type='text' placeholder='-- VIN --' style='position:relative; top:5px; width:85px;' /> <span style='line-height:34px;'>Stock Number:</span> <input id='newCarStockNumber_" + newCarNum + "' name='newCarStockNumber_" + newCarNum + "' type='text' placeholder='-- Stock Num --' style='position:relative; top:5px; width:80px;' /> <span style='line-height:34px;'>Loan Length:</span> <input id='newCarLoanLength_" + newCarNum + "' name='newCarLoanLength_" + newCarNum + "' type='text' value='" + globalLoanLength + "' placeholder='Loan Length' style='position:relative; top: 5px; width:50px;' /> <span style='line-height:34px;'>APR:</span> <input id='newCarAPR_" + newCarNum + "' name='newCarAPR_" + newCarNum + "' type='text' value='" + globalAPR + "' placeholder='-- APR --' style='position:relative; top: 5px; width:50px;' /></td></tr>";

$("#newCarTable tr").eq(-2).before(insertString);

if (newCarNum % 2 == 0)
        $("#newCarsSubmitRow").css("background-color", "#ffffff");
else
        $("#newCarsSubmitRow").css("background-color", "#f8f8f8");

});

That worked! Thanks! Is there a reason why mine only worked for the hard coded selects and not the ones that got appended? — Brds, Jun 03 '13 at 01:47
Good to know. I'll mark this as the answer once i'm allowed to - stupid time limits :( — Brds, Jun 03 '13 at 01:50
see here for the difference between those http://stackoverflow.com/questions/16057640/difference-between-on-functions-calls — PSR, Jun 03 '13 at 01:50

jQuery .on event not triggering for appended items

1 Answers1