Question

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

$(':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;

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

Answer 1

使用事件委派。使用on方法。

将一个或多个事件的事件处理函数附加到所选元素。

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

只需在上面的代码中更新您的parentSelector即可。

文档：https://api.jquery.com/on

Answer 2

使用jQuery的.on()函数添加运行时元素：

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

Answer 3

重要的一点是当你使用.on来附加事件时，按照下面的代码它将事件附加到静态和动态添加的控件，所以你不需要写的功能就可以完成附加功能的工作到所有元素（静态或动态）。

如果你在运行时添加复选框，即在页面创建之后，你需要使用jquery的.on函数来附加函数

$( "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) {

    }
});

jsfiddle：http://jsfiddle.net/m77sN/112/

Answer 4

在上下文中使用Event delegation在dom中添加动态创建的元素SO中有很多例子

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

jQuery：稍后通过innerHTML添加的复选框上的已检查事件无效。

4 个答案: