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