如何在每次调用JQuery Ajax函数后重置应用状态

核心问题来自两处错误逻辑：

• 你给多个功能按钮使用了重复的submitComment id，HTML规范要求id必须全局唯一，jQuery通过id选择器获取元素时只会返回第一个匹配的元素，导致后续点击其他按钮时始终操作的是第一次点击的元素，出现ID残留的问题
• 你已经把当前点击的按钮实例存到了thiselement变量里，但成功回调里依然用全局id选择器$('#submitComment')操作按钮，没有用到当前点击的实例

第一步：把所有触发该功能的按钮的id属性submitComment替换为class属性，比如class="submitCommentBtn"，保留data-id属性存储各自的动态ID
第二步：修改事件绑定和回调逻辑，改用class绑定事件，回调内用之前存储的当前元素实例操作，不要用全局id选择器

修正后的代码如下：

// 改用class绑定点击事件，所有同功能按钮都绑定该事件
$('.submitCommentBtn').on('click', function(){
    var id = $(this).data('id');
    var thiselement = $(this);

    // 如果需要每次点击新按钮时重置之前所有按钮的状态，可放开下面的注释
    // $('.submitCommentBtn').attr("disabled", false);
    // $('[id^="updatedicon-"]').html("待提交").removeClass('badge-success').addClass('badge badge-danger');

    $.ajax({
        url: 'includes/updateicon.php',
        type: 'POST',
        data: {id:id},
        dataType: 'html',
        success: function(data){
            if (data) {
                // 用当前点击的按钮实例操作，不会选到之前的按钮
                thiselement.attr("disabled", true);
                $('#customComment').val("");
                $('#updatedicon-'+id).html("DONE").removeClass('badge-danger').addClass('badge badge-success');
            } else {
                $('#customContent').load("custom/static/error.html");
            }
        },
        error: function(jqXHR, textStatus, errorThrown){
            $('#customContent').html("There was an Error about getting the Content:" + errorThrown);
        }
    });
});

• 禁止多个元素使用相同id，所有需要复用样式/事件的元素统一用class属性标识
• 如果业务要求同一时间只能有一个按钮处于提交完成状态，放开代码中注释的两行重置逻辑即可

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