在提交多个表单（在Rails中）后，尝试在显示Ajax之后再次显示时提交JQuery Flash消息

Question

我有一个简单地通过ajax添加新键名的表单。 我希望用户每次添加新键（而不是从弹出框）时都显示一条消息。 我正在使用Ruby on Rails，因此，当数据成功添加到db时，将执行以下Jquery编码。

这是在提交ajax之后运行的JQuery编码。

$('#status-area').html("");

$('#status-area').append("key added successfully");

$('#status-area').fadeOut(3000);

这是股利

  <div id="status-area"></div>

就像我第一次提交一样。 只需删除div中的所有先前文本，然后说“密钥添加成功”，然后消失即可。 问题是，如果我再次提交表单，则会添加新的密钥，但是消息不会再次显示。

它应该在第二次提交时再次执行此编码，删除旧文本并重新附加消息，但不是。

怎么又不显示？

Answer 1

这是正常现象，因为fadeOut会设置display: none

所以你将不得不使用

$('#status-area').fadeIn();

$('#status-area').html("");

$('#status-area').append("key added successfully");

$('#status-area').fadeOut(3000);

Answer 2

如果您使用jQuery fadeOut（）方法，则会在以毫秒为单位的时间内将html元素的不透明度从1降低到0（默认值为400）。

您需要在添加文本之前将div的不透明度设置为1。 如下修改代码段，它应该可以正常工作：

$('#status-area').css("display","block"); //div is by default a block element

$('#status-area').html("");
$('#status-area').append("key added successfully");
$('#status-area').fadeOut(3000);

使用您的代码，文本将被追加，但是由于div现在是透明的，因此您看不到它。 如果在浏览器中检查它，则可能会在div的style属性中将display属性设置为none。

<div id="status-area" style="display:none"></div>