jquery每个都不适用于Ajax加载的内容

Question

以下是我的代码，并且当页面加载它的工作正常，并且数组有我们检查的任何数据。

<div id="checkBoxes"> 
<input type="checkbox" class="applicationCheckbox" value="1" /> 
<input type="checkbox" class="applicationCheckbox" value="2" /> 
<input type="checkbox" class="applicationCheckbox" value="3" /> 
<input type="checkbox" class="applicationCheckbox" value="4" /> 
</div> 

<script type="text/javascript"> 
$(".applicationCheckbox:checked").each(function(){ 
    applications[i] = $(this).val(); 
    i++; 
}); 
</script> 

但是，如果我从附加jQuery的.append（）一些复选框，如果我选择什么都appened复选框，数组返回空:(

请帮我解决。

Answer 1

附上click或change事件的复选框..

$(function(){ 
     $('body').on('click',.applicationCheckbox , function(){ 
      $(".applicationCheckbox:checked").each(function(i){ 
       applications[i] = $(this).val(); 
      }); 
     }); 
    }); 

因为你动态地添加的元素，你需要代表事件。

体可以与任何静态父更换..

全码

var applications = []; 
$(document).on('click', '.applicationCheckbox', function() { 

    applications = $(".applicationCheckbox:checked").map(function() { 
     return this.value; 
    }).get(); 

    console.log(applications); 
}); 

var i = 5; 
$('#btn').on('click', function() { 
    $('#checkBoxes').append('<input type="checkbox" class="applicationCheckbox" value="' + i + '" />'); 
    i++; 
});​ 

Check Fiddle