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

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

您可能遇到的唯一轻微打嗝是您的元素是动态创建的，因此您必须在创建事件时将事件单独附加到每个元素（不要这样做）或您可以使用 Event Delegation 。

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

基本示例可能如下所示：

＆＃13;

$("#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'>");

＆＃13;

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

＆＃13;

Answer 2

看一下.on（）函数。添加后，必须将更改事件绑定到所有生成的复选框。只有在单独调用它时（在按钮处理程序或其他东西上），才会触发您发布的示例。

示例：

var selected = [];

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

    $('#key input[type="checkbox"]').change(function () {
        // your stuff
    });
}

更改处理程序的其他信息：How to handle change of checkbox using jQuery?

当JavaScript生成的复选框发生更改时运行函数

2 个答案: