Javascript 即使单击了父div，也要使动态生成的复选框单击“工作”

我已在动态生成的行中动态生成复选框。我将委托事件（“单击”）侦听器附加到整行

一切都很好-我通过单击行中的任何位置来切换复选框状态，除了一件小事-单击复选框本身不会切换其状态

下面是我的示例代码。有什么想法吗

//动态生成包含复选框和标签的div行
$（'#wrapper'）。追加(`
这是复选框


`);
//将委派的事件侦听器附加到整行
$（'#wrapper'）。在（'单击'，'行'，函数（）上）{
//切换选中属性
$（'#row[type=“checkbox”]”）。获取（0）。选中=！$（'#row[type=“checkbox”]”）。获取（0）。选中；
//单击后显示选中状态
$（'#wrapper.msg'）.text（`复选框状态为${$（'#行[type=“Checkbox”]'））.get（0）.checked}`）；
});
它不执行任何操作的原因是，如果您准确地单击复选框，代码会立即将该框重置回以前的状态。您可以通过使用标签上的
for
属性来解决此问题，然后只需在复选框本身上使用
change
事件即可：

重构HTML：

<div id="row">
    <label for="checkbox1">This is the checkbox</label>
    <input type="checkbox" id="checkbox1"></input>
</div>

如注释中所述，从代码中删除
单击
逻辑。它会立即覆盖默认的HTML功能。如果您的目的是在单击标签时选中复选框，则可以使用
for
属性并指向复选框的
id
：

更新：如果要在父级
div
的任何位置选中复选框，请向父级添加
单击处理程序。如果单击目标不是
复选框
，则强制选中该复选框。如果目标是
复选框
，请不要执行任何操作


$（'#wrapper'）。追加(`
这是复选框


`);
$（'wrapper'）。在（'click'，'row'，函数（e）上{
/*如果单击的元素不是复选框，
然后通过jquery强制检查
*/
如果（e.target.type！=='checkbox'）{
$（this.find（'input'）.prop（'checked'），！$（this.find（'input'）.prop（'checked'））
}
//单击后显示选中状态
$（'#wrapper.msg'）.text（`复选框状态为${$（'#行[type=“Checkbox”]'））.get（0）.checked}`）；
});
$（“#复选框测试”）.change（函数（）{
$（'#wrapper.msg'）.text（`复选框状态为${this.checked}`）；
})
您的主要问题是，当您单击
复选框时，事件会传播到行中，因此这与两次单击复选框的情况相同。解决方案是单击复选框时将事件的
stopPropagation（）
发送到父
行
：


//动态生成包含复选框和标签的div行
$（'#wrapper'）。追加(`
这是复选框


`);
//将委派的事件侦听器附加到整行。
$（'#wrapper'）。在（'单击'，'行'，函数（）上）
{
//切换选中的属性。
$（'#row[type=“checkbox”]”）。获取（0）。选中=！$（'#row[type=“checkbox”]”）。获取（0）。选中；
//单击后显示选中状态。
$（'#wrapper.msg'）.text（`复选框状态为${$（'#行[type=“Checkbox”]'））.get（0）.checked}`）；
});
$（'#wrapper'）。在（'click'，'input[type=“checkbox”]”上，函数（e）
{
$（'#wrapper.msg'）.text（`复选框状态为${$（'#行[type=“Checkbox”]'））.get（0）.checked}`）；
e、 停止传播（）；
});
哇！别担心，朋友。简单的错误是，一旦用户单击复选框，默认操作将是选中该复选框。这里的代码第二次执行此“检查”操作。因此，您将立即选中并取消选中该框

有两种可能的修复方法。或者，您可以简单地停止选中/取消选中代码中的复选框，换句话说，请在此处注释这一行：


/$（'#行[type=“checkbox”]”）。获取（0）。选中=$（'#row[type=“checkbox”]'）。获取（0）。选中如果单击的元素是复选框，则可以跳过复选框切换


//动态生成包含复选框和标签的div行
$（'#wrapper'）。追加(`
这是复选框


`);
//将委派的事件侦听器附加到整行
$（'wrapper'）。在（'click'，'row'，函数（e）上{
var$checkbox=$（'#row[type=“checkbox”]'）。等式（0）；
//切换选中属性
如果（！$checkbox.is（如目标））{
$checkbox.prop（'checked'），！$checkbox.prop（'checked'）；
}
//单击后显示选中状态
$（'wrapper.msg'）.text（'Checkbox status为${$Checkbox.prop（'checked'）}`）；
});

只需删除这一行（“#row[type=“checkbox”]”）。获取（0）。选中=$（'#row[type=“checkbox”]'）。获取（0）。选中-您正在将复选框重置回它刚出现的状态。选中的
属性由用户设置。。。所以如果你取消选中它。。您的代码会立即重新检查它。但是，只有在单击标签或复选框本身时，我才会切换复选框。当您有多个这样的条目，且复选框与行的右侧对齐，而标签与行的左侧对齐时，这就不太方便了。也就是说，当你在这些元素之间单击时，什么都不会发生。有没有一种方法可以通过一些CSS技巧以某种方式拉伸“敏感”标签区域？我的意图有点不同：理想情况下，我希望在单击行中的任何位置时切换复选框，而不仅仅是标签和复选框本身，因为我通过行的对侧对齐它们，并且它们之间有一些空白。有没有办法克服这个问题？
$("#checkbox1").change(function() {
    $('#wraper .msg').text(`Checkbox status is ${this.checked}`);
}).change(); //execute immediately so the text displays.