添加记录后成功提示仅首次显示问题排查

我在添加新记录时尝试显示提示信息，首次添加记录时提示正常出现，但后续再次添加记录时，尽管记录已成功添加，提示信息却不再显示。

HTML代码 #

<button id="add">Add Name To Table</button>
<input type="text" placeholder="Enter Name" id="name" style="display: none;">
<input type="text" placeholder="Enter Class" id="class" style="display: none;">

<button id="save" style="display: none;">Add Name</button>
<table>
    <thead>
        <tr>
            <th>Name</th>
            <th>Class</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
    </tbody>
</table>

<span id="message"></span>
<div id="editdiv"></div>

jQuery代码 #

$(document).ready(function () {

    var value;
    var Nclass;

    $('#add').click(function () {
        $('#name').show();
        $('#class').show();
        $('#save').show();
    });
    
    $('#save').click(function () {
        if ($('#name').val().length != "" && $('#class').val().length != "") {
            value = $('#name').val().trim();
            Nclass = $('#class').val().trim();

            if (value != "") {
                var cell = $('<td>').text(value);
                var classval = $('<td>').text(Nclass);
                var deletebtn = $('<button>').text('Delete').attr('class', 'delete');
                var editbtn = $('<button>').text('Edit').attr('class', 'edit');
                var row = $('<tr>').append(cell, classval, deletebtn, editbtn);
                $('tbody').append(row);
                row.hide().fadeIn();
                $('#message').text("Data Added Successfully").css("color", "green");
                setTimeout(function () {
                    $('#message').fadeOut();
                }, 2000);
                $('#name').val('');
                $('#class').val('');
            }
        } else {
            $('#message').text("You Cannot Submit While Input Fields Are Empty").css('color', 'red');
            setTimeout(function () {
                $('#message').fadeOut();
            }, 2000);
        }
    });
});

问题原因 #

第一次调用fadeOut()后，#message元素的display属性会被设置为none。后续添加记录时，虽然更新了文本内容，但没有重新显示这个元素，所以提示信息无法被看到。

修复方案 #

每次设置提示文本前，先调用show()方法让元素重新显示，确保用户能看到提示。

修改后的关键代码如下：

成功提示部分 #

$('#message').text("Data Added Successfully").css("color", "green").show();
setTimeout(function () {
    $('#message').fadeOut();
}, 2000);

错误提示部分 #

$('#message').text("You Cannot Submit While Input Fields Are Empty").css('color', 'red').show();
setTimeout(function () {
    $('#message').fadeOut();
}, 2000);

这样每次添加记录时，都会先把隐藏的#message元素显示出来，再设置文本，就能正常看到提示了。

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