javascript - 动态构建表时事件在 JQuery 中不起作用

Question

我有一个返回数据集的 AJAX 帖子。这部分工作完全正常。

但是，在 AJAX GET 的成功区域中构建表时，我为每一行创建一个复选框。

当我执行复选框的“单击”事件时，它不起作用。

这是 AJAX/Table 创建

function ListAppointments() {

$.ajax({
    type: "GET",
    url: "../Appointments",
    data: { 'id': id },
    contentType: "application/json; charset=UTF-8",
    dataType: "json",
    success: function (response) {
        if (response.length > 0) {
            $.each(response, function (i, item) {

                var apptDate, apptTime, arrivalTime = "";
                if (item.ApptDateTime != null) {
                    apptDate = moment(item.ApptDateTime).format('DD-MMM-YYYY');
                    apptTime = moment(item.ApptDateTime).format('HH:mm');
                }

                var row = '<tr class="grid__row--select"' + item.ID + '">' +
                    '<td><input id="check" name="check" id="chk" class="chkBoxOPA" type="checkbox" value="' + item.ID + '"/></td>' +
                    '<td style = "white-space:nowrap;">' +
                    '<div class="media-left">' +
                    '</div>' +
                    '<div class="media-body">' +
                    '<h3 class="list-group-item-heading">' + item.DisplayName + '</h3>' +
                    '<span class="list-group-item-text">' + item.DisplayDOB + '  (' + item.DisplayAge + ')</span>' +
                    '</div>' +
                    '</td>' +
                    '<td class="text-center" style="white-space:nowrap;">' +
                    '<span class="list-group-item-heading">' + apptDate + '</span>' +
                    '<span class="list-group-item-text">' + apptTime + '</span>' +
                    '</td>' +
                    '<td>' +
                    '<span class="grid__row--smaller-text">' + item.OutcomeDesc + '</span>' +
                    '</td>' +
                    '<td class="text-center" style="white-space:nowrap;">' +
                    '<span class="grid__row--smaller-text">' + arrivalTime + '</span>' +
                    '</td>' +
                    '</tr>';

                $('#appointments-body').append(row);
            });
        }
        else {
            console.log(JSON.stringify(response));
        }
    },
    error: function (response) {
        console.log(JSON.stringify(response));
    }
});

}

当我尝试这样做时

    $(".chkBoxOPA").on("change", ":checkbox", function () {
        alert('test');
    });

它似乎没有绑定(bind)或工作。

ListAppointments 函数在按钮单击事件上运行。

Answer 1

您动态添加了行，因此使用document

$(document).on("change", ".chkBoxOPA", function () {
    alert('anything');
});

或者如果您不想使用类，则使用 as

$(document).on("change", "input[type=checkbox]", function () {
        alert('anything');
    });