动态添加的复选框未触发 onCheck 或 onUncheck 事件答案

【问题标题】：Dynamically added checkbox is not firing onCheck or onUncheck events动态添加的复选框未触发 onCheck 或 onUncheck 事件
【发布时间】：2019-09-04 16:34:20
【问题描述】：

我有一些代码在运行时会循环遍历数组中的一些记录。对于每条记录，都会添加一个复选框。

$('#manage_time').empty();
$.each(times, function( index, value ) {
    $('#manage_time').append(generate_range_html(value.begin, value.end, value.line, value.absent, value.hours));
});

$('.manage_time_absent').checkbox();

如您所见，添加完所有复选框后，我将在循环之后对其进行初始化。

这是我上面代码sn-p中提到的generate_range_html()函数

function generate_range_html(begin, end, line, absent, hours) {

    var elem = '\
        <div class="one fields">\
            <div class="field">\
                <div class="ui toggle checkbox manage_time_absent">\
                    <input type="checkbox" class="hidden">\
                    <label>Absent?</label>\
                </div>\
            </div>\
        </div>\
    ';

    return elem;
}

由于某种原因，当我检查 onChecked 或 onUnchecked 事件时，我的控制台中没有任何内容。这是我的事件监听器

$('.manage_time_absent').checkbox({
    onChecked: function() {
        console.log($(this));
    },
    onUnchecked: function() {
        console.log($(this));
    }
});

我认为这与动态添加的复选框有关，并且事件侦听器仅侦听页面上已存在的元素的事件。

如何使此事件侦听器适用于以后动态添加的任何内容？

【问题讨论】：

您的假设是正确的，您在元素存在之前添加了事件处理程序。要解决此问题，请在添加新复选框后再次使用您的设置对象调用checkbox()
@RoryMcCrossan “使用您的设置对象”是什么意思？我已经在我添加到 DOM 的元素的循环之后直接再次调用 checkbox()。
我的意思是你需要在调用中包含{ onChecked: function() { ... 对象
@RoryMcCrossan 我明白了，谢谢。

标签： jquery events semantic-ui

【解决方案1】：

我通过将.checkbox() 事件处理程序直接移动到将复选框添加到 DOM 的循环之后来解决此问题。我不是每次都将它们初始化为复选框，而是直接附加事件处理程序。

$('#manage_time').empty();
$.each(times, function( index, value ) {
    $('#manage_time').append(generate_range_html(value.begin, value.end, value.line, value.absent, value.hours));
});

$('.manage_time_absent').checkbox({
    onChecked: function() {
        console.log($(this));
    },
    onUnchecked: function() {
        console.log($(this));
    }
});

【讨论】：