jQuery - 无法获取动态添加的复选框的值

Question

使用 php，我添加了复选框：

<div class="member"><input type="checkbox" name="team-members[]" value="5"></div>

并且我可以在选中复选框时获取 id：

$('input[name="team-members[]"]').click(function(){
    alert($(this).val());
});

我可以通过 ajax 向数组中添加一个复选框：

<div class="member"><input type="checkbox" name="team-members[]" value="9"></div>

但是当我点击动态添加的复选框时 - 警报不会触发。 控制台没有js错误。 单击新复选框时如何获取新复选框的ID？

Answer 1

对于所有动态添加的元素，您需要使用.on() 方法而不是.click()：

$(document).on('click', 'input[name="team-members[]"]', function() {
    alert($(this).val());
});


function addCheckBox() {
    let div = $('.member');
    let chkBx = document.createElement('input');
    chkBx.type = "checkbox";
    chkBx.name = "team-members[]";
    chkBx.value = "10";
  
    div.append(chkBx);
}

addCheckBox();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="member"><input type="checkbox" name="team-members[]" value="5"></div>

你可以找到一个很好的解释为什么这是必要的here。