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();
            });
        });
    });

由于您要动态添加元素，因此您需要委派活动。

Body可以替换为任何静态父级..

完整代码

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

Answer 2

试试这个

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

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

2 个答案: