多次触发嵌套事件

Question

我有一个关于以下代码的问题：

​

$(function() {
  var checkboxCnt = 1;
  var checkboxHtml =
    `<br><input type="checkbox" id="checkbox${checkboxCnt}">` +
    `<label for="checkbox${checkboxCnt}">Checkbox 1</label>`;

  // ******************************************
  $('div :checkbox').change(function(e) {
    checkboxChanged(e);
  });
  // ******************************************

  $('#btn').click(function() {
    checkboxCnt++;
    checkboxHtml = checkboxHtml.replaceAll(checkboxCnt - 1, checkboxCnt);
    $(this).before($(checkboxHtml));

    // ******************************************
    $('div :checkbox').change(function(e) {
      checkboxChanged(e);
    });
    // ******************************************
  });

  function checkboxChanged(e) {
    var checkboxID = '#' + e.target.id;
    if ($(checkboxID).is(':checked')) {
      console.log(checkboxID + ' is checked');
    } else {
      console.log(checkboxID + ' is unchecked');
    }
  }

});

#btn {
  width: 100px;
  height: 100px;
  background-color: yellow;
  display: block;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>

<div>
  <input type="checkbox" id="checkbox1">
  <label for="checkbox1">Checkbox 1</label>
  <button type="button" id="btn">Click Me!</button>
</div>

​

样品可在https://jsfiddle.net/da7wLukz/上找到。

这只是我目前正在编辑的代码的一个简化版本，每次单击该按钮时，它都会添加一个复选框。每次选中复选框时，我都想执行一些操作，但是我遇到了这样的问题:当您有4个复选框并选中checkbox4时，更改事件只被触发一次，但是当您检查checkbox3时，它被触发了两次，当您检查checkbox2时，它被触发了3次等等。代码在$('#btn).click内和外部都有相同的行，因为假设在$('#btn).click事件中没有$('div :复选框).change事件，那么当checkbox2，3，4.都检查过了。

我只希望在选中复选框时只触发一次更改事件，但如何才能这样做呢？谢谢你提前提供帮助。

Answer 1

不要嵌套事件处理程序。通过$(document).on() (文档)使用不引人注目的事件处理：

​

$(function() {
  var checkboxCnt = 0;
  var checkboxHtml =
    `<input type="checkbox" id="checkbox$%%">` +
    `<label for="checkbox$%%">Checkbox %%</label><br>`;
    
  function addCheckbox() {
    checkboxCnt++;
    $("#btn").before(checkboxHtml.replaceAll('%%', checkboxCnt));
  }

  $(document).on('change', 'div :checkbox', function () {
    if (this.checked) {
      console.log(this.id + ' is checked');
    } else {
      console.log(this.id + ' is unchecked');
    }
  });

  $('#btn').click(addCheckbox);
  addCheckbox();
});

#btn {
  width: 100px;
  height: 100px;
  background-color: yellow;
  display: block;
}

<script type="text/javascript" src="https://code.jquery.com/jquery-3.6.0.js"></script>

<div>
  <button type="button" id="btn">Click Me!</button>
</div>

​