【问题标题】：How to add flash message when user clicks sign out如何在用户单击退出时添加 Flash 消息
【发布时间】：2019-07-10 08:32:57
【问题描述】：

我想在用户单击“退出”按钮时显示 Flash 消息。此消息应持续 3 到 5 秒 (setTimeout)，然后用户将退出。我希望你能理解我。

$('#logout').click(function(e) {
  e.preventDefault().innerHTML = "You will be logout!";
  setTimeout(function() {
    window.location.href = "/logout";
  }, 5000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="/logout" id="logout">Sign out</a></li>

到目前为止，这是我的代码，当用户单击退出并显示警报消息时，3-5 秒后用户将退出。知道怎么做吗？谢谢大家。

【问题讨论】：

点击链接会出现以下错误：“Uncaught TypeError: Cannot set property 'innerHTML' of undefined”。
e.preventDefault(); $(this).innerHTML = "You will be logout!";

标签： javascript jquery html

【解决方案1】：

不能设置preventDefault的返回值的属性innerHTML。要么将消息附加到正文、特定元素，要么创建一个新元素。

这里会展示一个简单的Modal，更高级的Modal请参考here

$('#logout').click(function(e) {
  e.preventDefault();
  $(this).hide();
  $("body").append('<div style="z-index: 100; position: fixed; top: 10px; margin: 0 auto; left: 0; right: 0; width: 200px; padding: 20px; background: #EEEEEE;">You will be logged out</div>');
  setTimeout(function() {
    window.location.href = "/logout";
  }, 5000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="/logout" id="logout">Sign out</a></li>

【讨论】：

我可以添加带有消息的模式：“您将被注销”
我相应地改变了我的答案
非常感谢，你救了我:-)

【解决方案2】：

我已更正您的代码以使用 jquery 选择器 $(this) 和 .text() 函数。我也稍微修正了文字。

如果这不是你想要的，请告诉我。

演示

$('#logout').click(function(e) {
  e.preventDefault();
  $(this).text("You will be logged out!");
  setTimeout(function() {
    window.location.href = "/logout";
  }, 5000);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<li><a href="/logout" id="logout">Sign out</a></li>

【讨论】：