AJAX提交重复生成错误提示且3秒自动隐藏功能失效如何解决

两个问题的根因 #

• 重复错误提示问题：每次AJAX返回邮箱错误结果时，都会直接在邮箱输入框的父级节点后插入新的错误提示div，未提前清理已存在的同类型提示，多次点击提交就会多次叠加生成提示
• 自动隐藏失效问题：你给错误提示div设置的是class="validation"，但代码中误用了ID选择器匹配元素（同时代码里的ID选择器多写了一个#，jQuery选择ID仅需一个#作为前缀），根本匹配不到刚插入的提示元素，因此隐藏逻辑不会生效

额外问题说明 #

原代码else分支中，调用show()后直接执行css('display','none')，会直接覆盖show()的显示效果，导致#ID元素根本不会展示就直接隐藏，该语句需要删除。

修正后完整代码 #

$.ajax({
    url : $('#frm').attr('data-action'),
    type: 'post',
    data: $('#frm').serialize(),
    success: function(data) {
        // 先移除已存在的错误提示，避免重复叠加
        $('.validation').remove();
        if (data.indexOf("emailissue") > -1) {
            $("#emailaddress").parent().after("<div class='validation' style='color:red;font-size:0.90em;'>请输入有效的邮箱地址</div>");
            // 用class选择器匹配错误提示元素，延迟隐藏后直接移除
            $('.validation').delay(3000).fadeOut(function() {
                $(this).remove();
            });
        }else{
            $("#ID").show().delay(5000).fadeOut();
        }
     }
});

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