javascript - 使用名称捕获动态创建的 Select 的 onchange 事件

Question

我在动态创建的元素上使用了事件绑定？并使用 jQuery 从 <select> 获取更改的值以到达我现在所在的位置。

我正在动态创建一个 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);
});

这是页面：

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

标签： javascriptjquery

Answer 1

正如您提供的链接中接受的答案一样，您可以在现有父元素上使用事件绑定（例如，在这种情况下，您可以使用#programDetailTablebody）。

所以而不是使用

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

你一个用

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