jquery - Jquery each 不适用于 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() 中附加一些复选框，并且如果我选择了曾经出现的复选框，则数组返回 Empty :(

请帮我解决。

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++;
});​

检查小提琴

Answer 2

试试这个

$('.applicationCheckbox').on('input', function(){
  if ($(this).is(':checked')) {
    applications[i] = $(this).val();
    i++;
  }
});