javascript - 我如何使用 JavaScript 或 jQuery 动态处理复选框事件(使用动态 id 创建)？

Question

JavaScript 代码

==============

我已创建 SP 在线列表获取类别和子类别，每个类别都必须是复选框，因此我动态地给了它们一个唯一的 ID(类别名称)，我的目的是当用户单击其中一个类别时提醒“已单击”。

function getItem(listUrl) {

$.ajax({strong text
            url: _spPageContextInfo.webAbsoluteUrl + listUrl,
            type: "GET",
            headers: {
                "accept": "application/json;odata=verbose",
            },
            success: (data) => {

                var newsHTML = "";
                var news = {}

                var items = data.d.results;

                console.log(items)
                items.map((item) => {

                    var category = item.Category.Title

                    if (news[category] == null) {
                        news[category] = [];
                    }
                    var data = {
                        subcategory: item.Subcategory.Title,
                        description: item.Description
                    }

                    news[category].push(data)
                })

                for (let i in news) {
                    newsHTML += '<input id="' + i + '"" type="checkbox" name="myCheckbox" /> ' + i + '<br> <ul>';

                    let checkValue = $('#' + i + '').is(":checked");
                    console.log(checkValue)
                    for (let j in news[i]) {
                        newsHTML += '<input id="' + news[i][j].subcategory + '"" type="checkbox" name="myCheckbox" /> ' + news[i][j].subcategory + '<br>'
                    }
                    newsHTML += "</ul>";
                }

                $("#news").html(newsHTML);
                console.log(news)
            },
            error: function (error) {
                alert(JSON.stringify(error));
            }
        });
    }
}

Answer 1

我建议您使用event-delegation机制。它允许您处理所有复选框，而无需设置额外的 id 或其他内容。

$('#news').on('.change', 'input[name="myCheckbox"]', function(e){
    alert($(this).is(':checked'));
});

只需在 ajax 调用后添加此事件处理程序，它将处理所有动态复选框的更改。