javascript - 为 ajax 成功加载 div

Question

这个问题之前有人问过，我确实四处看看，尝试了很多方法，但它没有执行。只有 alert 功能似乎有效。在 ajax 中执行 POST 后，我试图在 success: 上加载一个小 div。这是我的代码:

$("#send").click(function(e) { e.preventDefault();

          $.ajax({
            type: 'POST',
            url: 'actions/update.php',
            data: $('#content').serialize(),
            success: function() {
          $(this).html('<div id="status">Saved!</div>');
          }
          });

        });

      $('#status').delay(5000).fadeOut(400);

我对这个 Div 的 CSS:

#status {
position:fixed;
top:50%;
left:50%;
z-index:100000;
width:150px;
height:150px;
margin:-75px 0 0 -75px;
background-color:rgba(0,0,0,0.7);
border-radius:150px;
font-size:30px;
line-height:150px;
font-weight:700;
color:#fff;
text-align:center;
cursor:default; }

我会不会在某处引起冲突？这是因为 e.preventDefault(); 任何帮助或链接将不胜感激!

Answer 1

$("#send").click(function(e) { e.preventDefault();
          var that = $(this);
          $.ajax({
            type: 'POST',
            url: 'actions/update.php',
            data: $('#content').serialize(),
            success: function() {
          that.html('<div id="status">Saved!</div>');

          $('#status').delay(5000).fadeOut(400);
          }
          });

        });

这里的问题是 this不是你认为的回调。试试上面的方法

编辑: 回应您的评论:

文本被新的 div 覆盖.解决这个问题的一种方法是将新的 div 插入到原始元素的子元素中。要获得淡出效果，您还必须将其放入回调中。否则它将在 ajax 调用返回之前执行。这是因为 ajax 调用是异步的，其余的 JavaScript 代码将在您等待服务器返回数据时继续执行

编辑2: 我不确定你点击的是什么类型的元素，但这里有两种方法:

1)在被点击的元素中添加一个子元素 例如:<a #id="send"><div id=someElement></div></a>

2) 在点击的元素旁边添加一个元素，并用新的 div 定位它