Javascript jQuery:Checked event on稍后通过innerHTML添加的复选框不起作用。

我的页面中有两个复选框，我将在下面的代码中为其捕获更改事件：

$(':checkbox').change(function(){
 alert('hello '+this.checked);
 });

但是，如果我将第三个复选框添加到该组并单击该复选框，则不会触发上述功能

我通过innerhtml代码将第三个复选框添加到组中，如下所示：

 var text2='<li><input type="checkbox" name="vehicle" value="TRUE"/><a    href="#"> New function</a></li>';
 text1=text1+' '+ text2;
 parent.innerHTML=text1;

var text2='
'；
text1=text1+''+text2；
parent.innerHTML=text1；

---

注意：text1是现有两个复选框的现有innerhtml代码

这里重要的一点是，当您使用.on来附加事件时，根据下面的代码，它会将事件附加到静态和动态添加的控件中，因此不需要指定您所编写的函数，它将完成附加到所有元素（静态或动态）的函数的工作

---

如果您在运行时（即创建页面后）添加复选框，则需要使用jquery的函数来附加功能

$( "input[type=checkbox]" ).on( "click", countChecked );

var countChecked = function() {
  var n = $( "input:checked" ).length;
  $( "div" ).text( n + (n === 1 ? " is" : " are") + " checked!" );
};

简单地说，你可以做到这一点

$('document').on("change", "input:checkbox", function() {  
                alert('hello '+this.checked);});

或尝试

$('input:checkbox').on('change', function () {
    if (!this.checked) {

    }
});

---

JSIDLE：使用事件委派。在方法上使用

将一个或多个事件的事件处理程序函数附加到选定元素

只需在上面的代码中更新您的
parentSelector
，它就可以工作了

文档：
在dom中添加动态创建元素的上下文中，使用
事件委派

$(document).on('change' , ':checkbox', function(){
    alert('hello '+this.checked);
 });

对运行时添加的元素使用jQuery的功能：

$(document).on('change',':checkbox',function(){
 alert('hello '+this.checked);
 });

这有什么不对？它不适用于动态添加的复选框这不是事件委派，最好看看其他的posted@Tushar你试过了吗？会的work@FatalError你试过了吗？我试过了所有这些方法，但还是不起作用。我们是否需要更改早期复选框的事件和动态添加复选框的事件？@Rain-您可以在JSFIDLER中提供您的代码吗？嗨，Pranay，您的邮件ID是什么。我可以将文件发送给您。基本上，我认为问题在于事件对我的代码根本不起作用，即使我将其包装在document.ready函数中。我尝试了许多不同的方法在事件上写下签名$在（'change'，function（）{$（document）.上（'change'，function（）{$（document）.上（'change'，function（）{$（document）.在（'change'，input[type='checkbox']），function（）{@Rain-你可以检查一下它的工作方式对你也有帮助…对你有用吗？？
$(document).on('change',':checkbox',function(){
 alert('hello '+this.checked);
 });