jQuery处理动态创建复选框事件绑定失效问题求助

你的问题出在事件绑定的方式上——虽然用了.on()，但写法还是和.click()一样，只绑定了代码执行时已存在的DOM元素，动态创建的复选框并没有被关联事件。正确的做法是用事件委托，把事件绑定到静态存在的父元素上，通过事件冒泡处理动态元素的操作。

修正后的事件绑定代码 #

$('#forma').on('click', 'input[type=checkbox]', function(e){
    // 用jQuery简化选中值的收集逻辑
    let resultList = $('.checkbox:checked').map(function() {
        return this.value;
    }).get();
    
    console.log(resultList);
    $.ajax({
        url: 'rest',
        type: 'POST',
        dataType: 'json',
        data: {
            'status': 'OK',
            'list': resultList,
            'csrfmiddlewaretoken': '{{ csrf_token }}'
        },
        success: function (response) {
            // 可添加成功后的处理逻辑
        },
        error: function (response) {
            // 可添加错误后的处理逻辑
        }
    });
 });

关键说明 #

• $('#forma')是页面加载时就存在的静态父元素，事件绑定在它上面不会失效
• 第二个参数'input[type=checkbox]'是事件的目标选择器，只有当点击事件的目标匹配这个选择器时，才会执行处理函数
• 这种写法会自动捕获#forma内部所有（包括后续动态创建的）复选框的点击事件

可选优化：用jQuery简化复选框创建代码 #

如果你习惯用jQuery语法，创建复选框的代码也可以简化，逻辑和原生写法一致：

$('#forma').submit(function(e) {
    e.preventDefault();
    let $forma = $(this);
    $forma.empty();
    for (let i = 0; i < 3; i++) {
        let $label = $('<label></label>');
        let $checkbox = $('<input>', {
            type: 'checkbox',
            class: 'checkbox',
            value: 'Prog Lang',
            id: `checkbox-${i}`,
            name: 'checkbox'
        });
        $label.append($checkbox).append(i);
        $forma.append($label);
    }
});

内容的提问来源于stack exchange，提问作者1v5a3g5