jQuery .on事件不會觸發附加項目

Question

我有一個用戶從下拉列表中選擇一年的位置 - 誰的ID是「newCarYear_1」。當用戶選擇一年時，它會填充第二個下拉列表的選項「newCarMake_1」。選擇make後，將填充「newCarModel_1」的選擇選項。它可以正常工作，除了當用戶點擊「添加汽車」按鈕並添加「newCarYear_2」，「newCarMake_2」和「newCarModel_3」時，選項不會填充到品牌和型號中。下面是我對上改變代碼：

$('[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); 
    }); 
}); 

，這裏是當用戶點擊「添加一車」按鈕代碼：

$("#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"); 
}); 

我想不通爲什麼一個額外的車ISN不會觸發.on聲明。

Answer 1

試試這個

$(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"); 

}）;