使用名称捕获动态创建的 Select 的 onchange 事件答案

【问题标题】：Catch onchange event for a dynamically created Select using name使用名称捕获动态创建的 Select 的 onchange 事件
【发布时间】：2021-02-14 01:48:04
【问题描述】：

我使用Event binding on dynamically created elements? 和Get changed value from <select> using jQuery 到达了我现在的位置。

我正在动态创建一个 Select 下拉菜单，并希望捕获所选项目。

我的代码是：

$(document).on('click', '#programDetailTablebody button[name="addPDRow"]', function(e) {
    e.preventDefault();
    
    var newRows = "";
                newRows += "<tr><td class='button'><button type='button' name='addPDRow' class = 'buttonFront'><span class='glyphicon glyphicon-plus'></span></button></td>";
                newRows += "<td class='keyvalue'><input class='timeWidth timeClass pdValue' name='timeInput' value='07:00'></input></td>"; //Time
                newRows += "<td class='keyvalue'><select class='form-control activityTypeWidth activityTypeClass pdValue' name='activityTypeInput'>" //Activity Type
                newRows += "<option value='' disabled selected>Select Activity Type</option>" + activityTypeOptions + "</select>"
                newRows += "<td class='keyvalue'><select class='form-control activityWidth activityClass pdValue' name='activityInput'>" //Activity
                newRows += "<option value='' disabled selected>Select Activity</option>" + activityOptions + "</select>"
                newRows += "<td class='keyvalue'><input class='equipmentClass pdValue' name='equipmentInput'></input></td>";//Equip. Needed
                newRows += "<td class='keyvalue'><input class='awardClass pdValue' name='awardInput'></input></td>";//Award
                newRows += "<td class='keyvalue'><input class='leadersClass pdValue' name='leadersInput'></input></td>";//Leaders
                newRows += "<td class='button'><button type='button' name='removePDRow' class = 'buttonFront'><span class='glyphicon glyphicon-minus'></span></button></td></tr>";
        
    $(newRows).insertAfter($(this).closest('tr'));
});

$("select[name='activityTypeInput']").on( 'change', 'option', function (e) {
    e.preventDefault();
    alert("Changed");
    var activityType = $(this).val();
    alert(activityType);
});

这是页面：

当我选择一个选项并且控制台中没有错误时，不会触发警报。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

与accepted answer in the link you provided 一样，您可以在现有父元素上使用事件绑定（在这种情况下，例如，您可以使用#programDetailTablebody）。

所以不要使用

$("select[name='activityTypeInput']").on( 'change', 'option', function (e) { ... }

你一个用处

$('#programDetailTablebody').on( 'change', "select[name='activityTypeInput']", function (e) { ... }

【讨论】：