jQuery .change 函数不会从选择中捕获第二个更改

Question

我有一个按钮，每次我按下它时都会附加一个选择，并增加id

当我更改其中一个选择时，应该触发下面的函数，但只有在我更改第一个选择时才触发。

这是 .onchange 函数

var appendedCheckboxes =[];
$("select[id^='catalogName']").change(function(event){
debugger;
var cataid = $("select[id*=catalogName").val()
var cata = out.find(element => {
return element._id == parseInt(cataid)
})
var catalogId = event.target.id.slice(-1);
if(jQuery.inArray("#insertCheboxesForCatalogsHere"+catalogId, appendedCheckboxes) !== -1){
$("#insertCheboxesForCatalogsHere" + catalogId + " div").last().remove();
appendedCheckboxes.splice(jQuery.inArray("#insertCheboxesForCatalogsHere"+catalogId, 1));
}
var count = 1
cata.categories.forEach(element => {
$('#insertCheboxesForCatalogsHere' + catalogId).append('<div class="input-group mb-1"><div style="margin-left: 10px" class="custom-control custom-checkbox my-1 mr-sm-2" id="task' + count + '"><input type="checkbox" class="custom-control-input" id="' + cata._id + "," + element._id + '"><label class="custom-control-label" for="' + cata._id + "," + element._id + '">'+element.name +'</label></div></div>')            
count++;
})
appendedCheckboxes.push("#insertCheboxesForCatalogsHere" + catalogId);
})

我附加的选择

$('#insertCatalogHere').append(
'<div id="insertCheboxesForCatalogsHere' + catalogcounteradd +'"class="input-group mb-1">
<div class="input-group-prepend">
<span class="input-group-text" id="">Catalog ' + catalogcounteradd + '</span></div>
<select class="custom-select" id="catalogName' + catalogcounteradd + '" name="catalogName' + catalogcounteradd + '" required>
<option value="" selected>Catalogs...</option>
{{#each catalog}}
<option value="{{this._id}}">{{ this.name }}
</option>
{{/each}}
</select></div>');

Answer 1

$(document(.on("change"， "select[id^='catalogName']"， function (( { }( 为我工作