多次觸發嵌套事件

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 個復選框並選中復選框 4 時，更改事件僅觸發一次，但是當您選中復選框 3 時，它是觸發兩次，當您選中復選框2時，它會觸發3次，依此類推。 代碼在 $('#btn).click 內部和外部具有相同的行，因為假設我們在 $('#btn).click 事件中沒有 $('div:checkbox).change 事件，那么當 checkbox2, 3, 4... 被選中時不會觸發 change 事件。

我只希望在我（取消）選中復選框時僅觸發一次更改事件，但我該怎么做呢？ 提前謝謝你的幫助。

Answer 1

不要嵌套事件處理程序。 通過$(document).on() ( docs ) 使用不顯眼的事件處理：

 $(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>