Visual Studio 2017+Cordova中Checkbox的onclick/onchange事件无法触发

首先，你的核心问题是动态生成的DOM元素无法绑定普通事件——因为你在$.getJSON回调里生成checkbox后，才调用$( ".alles" ).click()，但执行绑定代码时，checkbox还没被插入到DOM中，普通事件绑定只能作用于绑定时刻已存在的元素，动态生成的元素需要用事件委托来处理。

另外，代码里还有两个小问题需要修正：

• checkbox的class属性重复定义了两次：class="onoffswitch-checkbox"和class="alles"，应该合并为class="onoffswitch-checkbox alles"。
• 如果循环生成多个checkbox，id="myonoffswitch"会重复（HTML中id必须唯一），这会导致label和checkbox的关联失效，建议改成动态id，比如myonoffswitch-${i}，对应的label的for属性也要同步修改。

修正后的代码示例 #

1. 事件委托的正确写法 #

把原来的普通事件绑定：

$( ".alles" ).click(function() {
    console.log("hoi")
});

改成事件委托，绑定到一个初始就存在的父元素（比如#int，它一开始就在DOM里）：

$('#int').on('click', '.alles', function() {
    console.log("hoi");
    // 可以在这里获取checkbox状态：$(this).is(':checked')
});

如果父元素也可能动态变化，也可以绑定到document：

$(document).on('click', '.alles', function() {
    console.log("hoi");
});

2. 修正重复class和id的问题 #

在生成interesses的代码里，合并class并修改id为动态值：

当field.acceptsallworkgroups == '1'时：

var interesses = `<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox alles" id="myonoffswitch-${i}" checked>
    <label class="onoffswitch-label" for="myonoffswitch-${i}">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>`;

else分支同理：

var interesses = `<div class="onoffswitch">
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox alles" id="myonoffswitch-${i}">
    <label class="onoffswitch-label" for="myonoffswitch-${i}">
        <span class="onoffswitch-inner"></span>
        <span class="onoffswitch-switch"></span>
    </label>
</div>`;

（如果不习惯ES6模板字符串，也可以用字符串拼接，把${i}换成+i+）

完整修正后的核心代码片段 #

$(document).ready(function() { 
    var id = localStorage.getItem("id"); 
    $.getJSON("https://url.nl/interesses_json.php?id="+id, function(result) { 
        $.each(result, function(i, field) { 
            let interesses, interlist;
            if(field.acceptsallworkgroups == '1'){ 
                interesses = `<div class="onoffswitch">
                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox alles" id="myonoffswitch-${i}" checked>
                    <label class="onoffswitch-label" for="myonoffswitch-${i}">
                        <span class="onoffswitch-inner"></span>
                        <span class="onoffswitch-switch"></span>
                    </label>
                </div>`; 
                interlist = `<div style="padding-left: 30px;padding-top: 20px; height: 200px;">Je staat momenteel open voor voorstellen uit alle categorieën</div>`; 
            }else{ 
                interesses = `<div class="onoffswitch">
                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox alles" id="myonoffswitch-${i}">
                    <label class="onoffswitch-label" for="myonoffswitch-${i}">
                        <span class="onoffswitch-inner"></span>
                        <span class="onoffswitch-switch"></span>
                    </label>
                </div>`; 
                interlist = `<div style="padding-left: 30px;padding-right: 30px; padding-bottom: 20px;">
                    <div style="padding-left: 30px; border-radius: 8px;background: linear-gradient(#F5C436, #F3B23F); height: 40px; color: white; padding-top: 10px;">
                        <div style="color: white; float:left;">${field.name}</div>
                        <div style="color: white; float:right; padding-right: 20px;">
                            <a href="javascript:void(0);" id="detail${field.id}"> v </a>
                        </div>
                    </div>
                    <div id="showdetail${field.id}" style="display: none;background-color:#f7f7f7; padding-top: 20px; padding-left:30px;">${field.comments}</div>
                </div>`; 
            } 
            document.getElementById('int').innerHTML = `<div style='padding-left: 30px;'>
                <div style='float: left; padding-top: 10px; '> Ik sta open voor alles: </div>
                <div style='float: right; padding-right: 40px; '> ${interesses}</div>
            </div>`; 
            document.getElementById('intlist').innerHTML += interlist; 
        }); 
        // 用事件委托绑定事件
        $('#int').on('click', '.alles', function() { 
            console.log("hoi");
            // 可以在这里处理checkbox状态变化
            if($(this).is(':checked')){
                console.log("Checkbox is checked");
            } else {
                console.log("Checkbox is unchecked");
            }
        }); 
    }); 
});

为什么事件委托能解决问题？ #

事件委托利用了事件冒泡机制：当你点击动态生成的checkbox时，事件会向上冒泡到父元素（比如#int），我们在父元素上监听了click事件，只要目标元素匹配.alles选择器，就会执行回调函数。这样不管元素是初始存在还是后来动态生成的，都能触发事件。

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