在提交多個表單（在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>