jquery - 如何在文本区域中的每个 ajax 请求后显示“已保存”消息

Question

嗨，我有带有 ajax 请求的文本区域，可以将文本保存在草稿中。当我导航到表单页面并开始在 textarea 中写入文本时，它仅第一次显示“已保存为草稿”的消息，之后它不会在我设置的 div 中提供任何消息。所以我想在完成后显示此消息我的每一个 ajax 请求。这是我的代码，请建议。

$(function() {
    autoSaveEntry()
});
function autoSaveEntry() {
  if($('#txtarea').val().length>0){
    $.ajax({
        url: "/account/drafts/"+$('#dreft_id').val(),
        dataType: "script",
        async: "true",
        type: "PUT",
        data: {
                body:$('#txtarea').val()
              },
        success: function() {

            $('#message').append('Saved as draft');

            setTimeout(function () {

                $('#message').fadeOut(function(){

                    $(this).remove();

                });

            }, 2000);

        }
    });
  }
  setTimeout(autoSaveEntry, 5000)

}

Answer 1

您正在删除消息 div，以便第二次脚本无法将“另存为草稿”此消息放在何处。

所以只能通过替换 $(this).remove(); 来做空白#message div 通过 $(this).html('');

最终代码如下。它会为你工作。

  $(function() {
      autoSaveEntry()
   });
  function autoSaveEntry() {
    if($('#txtarea').val().length>0){
      $.ajax({
          url: "/account/drafts/"+$('#dreft_id').val(),
        dataType: "script",
        async: "true",
        type: "PUT",
        data: {
                body:$('#txtarea').val()
              },
        success: function() {

            $('#message').append('Saved as draft');

            setTimeout(function () {

                $('#message').fadeOut(function(){

                    $(this).html('');

                });

            }, 2000);

        }
    });
  }
  setTimeout(autoSaveEntry, 5000)

}

享受...！！

Answer 2

那是因为您从 DOM 中删除了消息 div。不要追加 div，只需将其添加到 html 中并将其样式设置为 display:none

HTML

<div style = 'display:none' id = 'message'></div>

和

代替：

 $('#message').fadeOut(function(){
          $(this).remove();
});

经过：

$('#message').fadeOut();

Answer 3

setTimeout(function(){autoSaveEntry()}, 5000);

或者甚至更好地将其移入：

$(function() { setTimeout(function(){autoSaveEntry()}, 5000); });