如何避免append多次执行？解决文件夹重复提示重复添加问题

首先看你这段代码的核心问题：每次触发提示时用了append()方法，它会把新内容追加到元素原有内容的后面，所以多次点击按钮就会导致提示语重复出现。这里给你几个简单易懂的解决思路：

方法1：用text()替换append() #

直接用text()方法设置提示框内容，它会覆盖掉元素里的原有内容，不管点击多少次，提示语只会显示一次：

$('.btn-default').click(function() { 
    var foldername = $('#file_title').val(); 
    $.post('<?php echo base_url(); ?>ClientCont/List_Files/inserttitle',{ 
        file_title:foldername 
    },function(data){ 
        console.log(data); 
        if(data['exist']== true ){ 
            if($('#notifme').length != 0){ 
                // 用text()直接替换内容，避免追加重复
                $('#notifme').text("Folder name already exist!").show(); 
            } 
        }
    },'json'); 
});

方法2：先清空再追加（适合多提示场景） #

如果后续需要在提示框里追加不同的提示内容，可以先清空原有内容，再添加新提示：

$('.btn-default').click(function() { 
    var foldername = $('#file_title').val(); 
    $.post('<?php echo base_url(); ?>ClientCont/List_Files/inserttitle',{ 
        file_title:foldername 
    },function(data){ 
        console.log(data); 
        if(data['exist']== true ){ 
            if($('#notifme').length != 0){ 
                // 先清空原有内容，再追加新提示
                $('#notifme').empty().append("Folder name already exist!").show(); 
            } 
        }
    },'json'); 
});

方法3：从根源避免重复请求（进阶优化） #

还可以给按钮加个禁用状态，防止用户短时间内多次点击触发重复请求，彻底避免重复提示的可能：

$('.btn-default').click(function() { 
    var $btn = $(this);
    // 如果按钮已经禁用，直接返回不执行后续逻辑
    if($btn.is(':disabled')) return;
    
    var foldername = $('#file_title').val(); 
    // 禁用按钮并修改文字，提示用户正在处理
    $btn.prop('disabled', true).text('Creating...');
    
    $.post('<?php echo base_url(); ?>ClientCont/List_Files/inserttitle',{ 
        file_title:foldername 
    },function(data){ 
        console.log(data); 
        if(data['exist']== true ){ 
            if($('#notifme').length != 0){ 
                $('#notifme').text("Folder name already exist!").show(); 
            } 
        }
        // 请求完成后恢复按钮状态
        $btn.prop('disabled', false).text('Create Folder');
    },'json')
    .fail(function() {
        // 请求失败也要恢复按钮状态，避免按钮一直禁用
        $btn.prop('disabled', false).text('Create Folder');
        $('#notifme').text('Failed to create folder!').show();
    });
});

这个方案不仅解决了重复提示的问题，还优化了用户体验，避免无效的重复请求。

内容的提问来源于stack exchange，提问作者Niño Cuenco