javascript - 当 JavaScript 生成的复选框发生变化时运行函数

Question

我正在创建一个网页，并根据 CSV 文件在该页面中填充值。

根据 CSV 文件中的列数，我想生成一个包含这些值的复选框列表。我有那个工作:

function updateKey() {
    var key = '';
    for (var item in data[0])
    {
        key += '<input type="checkbox" name="' + item + '" value="' + item +'"> '
        key += item + "<br>\r\n"
    }
    document.getElementById('key').innerHTML = key
}

现在我想检测用户何时选中这些复选框，并基于此运行功能。例如，假设我只想显示 CSV 文件中选中的行。我需要监听复选框状态的变化，然后计算哪些复选框被选中，然后相应地更新 HTML。

我在 stackoverflow 上查找并找到了这样一个函数:

var selected = [];
$('#key input[type="checkbox"]:checked').each(function () {
    selected.push($(this).attr('name'));
});

但是，当我选中复选框时，它似乎没有触发。我在 push 函数之后添加了一个警告窗口，但似乎没有任何反应。是因为这些复选框是在页面加载后生成的吗？有没有办法监听这些动态创建的复选框？

Answer 1

您正在寻找的是一个简单的事件绑定(bind)。

您可能会遇到的唯一小问题是您的元素是动态创建的，因此您必须在创建元素时分别为每个元素附加一个事件(不要这样做这) 或者你可以使用所谓的 Event Delegation .

我们不是将事件绑定(bind)到元素本身，而是在其容器上放置一个监听器。这个监听器将处理所有的复选框。

一个基本示例可能如下所示:

$("#key").on('change', 'input[type=checkbox]', function() { 
    var selected = [];
    $('#key input[type="checkbox"]:checked').each(function () {
        selected.push($(this).attr('name'));
    });
    console.log(selected);
})

$("#key").append("<input type='checkbox' name='check1'>");
$("#key").append("<input type='checkbox' name='check2'>");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Check the boxes below.

<div id="key"></div>