0

之前有人问过这个问题，我确实环顾四周，尝试了很多方法，但它没有执行。alert似乎只有一个功能起作用。success:在执行我POST的 ajax后，我试图加载一个小 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();任何帮助或链接将不胜感激！

4

3 回答 3

3 
$("#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 代码将继续执行

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

1）将子元素添加到单击的元素中，例如：<a #id="send"><div id=someElement></div></a>

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

于 2013-10-03T00:22:56.160 回答
2

在 $.ajax 回调中，context( this) 默认是 $.ajax 返回的 jqXHR 对象。
但是，您可以使用 $.ajax 方法的配置对象中的 context 属性来设置您想要的任何内容。例如

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

这会将所有回调中的上下文设置为调用函数中的上下文。

于 2013-10-03T00:24:12.163 回答
0 
$("#send").click(function(e) { 
    e.preventDefault();
    $.ajax({
        type: 'POST',
        url: 'actions/update.php',
        data: $('#content').serialize(),
    }).done(function() {
        $('#status').html('Saved!');
    });
$('#status').delay(5000).fadeOut(400);
<div id='status'></div>
于 2013-10-03T00:24:17.397 回答