Javascript 点击jQuery不会开火

我有一个

文本框、一个复选框和一个
span
标记。当我单击复选框时，它应该在
span
标记中显示其状态。更新
textbox
时，它会重新插入复选框块。现在单击复选框时，它无法更新状态

我正在使用

上的

事件处理程序来处理复选框单击事件，因此我希望它能正常工作

你知道为什么这样做没有达到预期效果吗


$（'div[role]input[type=checkbox]'）。在（'click'，chg'）；
$（'div[role]input[type=text]'）。在（'input'，sourceChanged）上；
函数chg（）{
var istiki=$（this）.is（“：checked”）；
$（'#upd'）.html（istiki）；
}
函数sourceChanged（）{
$（'span'，$（this）.closest（'input group'））.html（“”）；
}
当值更改时动态创建一个新复选框时，您需要将事件委派给复选框，方法是将其指派给非动态祖先：

$('div[role]').on('change', 'input[type=checkbox]', chg);

注意我是如何使用
change
而不是
click
的，因为这更适合复选框


在下面的代码片段中，我还将
$（this）.is（“：checked”）
更改为
this.checked


$（'div[role]'）。在（'change'，'input[type=checkbox]'，chg）上；
$（'div[role]input[type=text]'）。在（'input'，sourceChanged）上；
函数chg（）{
var istiki=此项已检查；
$（'#upd'）.html（istiki）；
}
函数sourceChanged（）{
$（'span'，$（this）.closest（'input group'））.html（“”）；
}

您需要。。。因为您要插入一个新的复选框，所以您绑定事件的原始复选框不再存在。谢谢James。我不知道我应该把动态的东西放在右边。你在旧的复选框上附加了一个新的复选框，这使得它成为了一个新的元素，当你设置处理程序时，它不在DOM中。出于好奇，
.input组已经有了一个复选框，那么为什么要这样做-
$（'span'，$（This）.closest（'.input-group'））.html（''）？你们会在乱扔评论之前阅读问题吗？我知道我在添加新的元素。我写的。我在事件中也使用了
。我只是语法有误。非动态祖先就是我想要的。这只是为了演示TJ。我有更复杂的事情发生在那里。