jQuery委托问题：单次点击触发多次删除计数更新

问题根源 #

每次点击添加按钮时，你都重复执行了$(".remove_pse_record").click(...)，这会给页面上所有已存在的删除按钮再次绑定一次点击事件。比如第一次添加后，原有按钮会有2个点击事件；第二次添加后变成3个，点击时就会触发多次update_record_count，导致计数递减多次。

修复方案 #

推荐两种简洁的修复方式：

方式1：使用事件委托（最优解） #

直接给父元素绑定一次事件，无需每次添加新元素都重新绑定。替换初始的删除按钮事件，同时删掉添加函数里重复绑定的代码。

修改后的完整代码：

// 仅执行一次，用事件委托处理所有删除按钮的点击
$("#configuration").on("click", ".remove_pse_record", function(e) {
    $("#" + $(this).data("id")).fadeTo("slow", 0.00, function(){
       $(this).slideUp("slow", function() {
           $(this).remove();
           // 元素彻底移除后再更新计数，确保同步
           update_record_count(".pse_record_count");
       });
    });

    e.preventDefault();
});

$("#add_pse_exception").click(function(e) {
    const last_id = $("#configuration > div").last().data("id");
    const next_id = last_id + 1;

    const new_record = `<div id="a_${next_id}" data-id="${next_id}" class="record">
<div class="full_col">
    <div><div>Notes:</div><div><textarea name="a_notes_${next_id}"></textarea></div></div>
</div>
<div class="full_col separator">
    <ul>
        <li><a href="#" title="Remove new record" class="remove_pse_record" data-id="a_${next_id}"><i class="fa-solid fa-trash remove_icon"></i></a></li>
    </ul>
</div>
</div>`;

    $(new_record).insertAfter($("#configuration > div").last());
    update_record_count(".pse_record_count", true);

    e.preventDefault();
});

function update_record_count(element, increase=false) {
    const count = parseInt($(element + ":first").text());
    
    $(element).each(function() {
        $(this).text(increase ? count + 1 : count - 1);
    });
}

方式2：仅给新添加的元素绑定事件 #

如果不想用事件委托，可在添加新元素时，只给当前生成的删除按钮绑定事件，而非选中所有.remove_pse_record。

修改添加函数中的绑定逻辑：

// 替换原有的$(".remove_pse_record").click(...)
const $newRecord = $(new_record);
$newRecord.find(".remove_pse_record").click(function(e) {
    $("#" + $(this).data("id")).fadeTo("slow", 0.00, function(){
       $(this).slideUp("slow", function() {
           $(this).remove();
           update_record_count(".pse_record_count");
       });
    });

    e.preventDefault();
});

$newRecord.insertAfter($("#configuration > div").last());

额外优化点 #

• 用let/const声明变量，避免全局变量污染；
• 把计数更新放在元素彻底移除的回调中，确保DOM操作和计数更新同步；
• 用模板字符串拼接HTML，代码可读性更强。

内容的提问来源于stack exchange，提问作者llanato