ajax .html(数据)如果我之后尝试还原原始内容，则不会显示

Question

我正在使用以下JS处理AJAX请求

$(document).ready(function() {
  // Variable to hold original content
  var original_content_qty = '';
  $('.product-qty-<?php echo $products->fields['
    products_id ']; ?>').submit(function(e) {
    e.preventDefault();
    $.ajax({
      url: 'submit.php',
      type: 'POST',
      data: $(this).serialize(),
      dataType: 'html'
    }).done(function(data) {
      original_content_qty = $('.qty-update-<?php echo $products->fields['
                               products_id ']; ?>').html();
      console.log(original_content_qty);
      console.log(data);
      $('.qty-update-<?php echo $products->fields['
        products_id ']; ?>').fadeOut('slow', function() {
        $('.qty-update-<?php echo $products->fields['
          products_id ']; ?>').fadeIn('slow').html(data); //display a success message sent back via ajax
        $('.qty-update-<?php echo $products->fields['
          products_id ']; ?>').delay(1200).fadeOut('slow').html(data);
        $('.qty-update-<?php echo $products->fields['
          products_id ']; ?>').html(original_content_qty); // restore original content after success message
      });
    }).fail(function() {
      alert('Ajax Submit Failed ...');
    });
  });
});

如果我没有行

$('.qty-update-<?php echo $products->fields['products_id']; ?>').html(original_content_qty);

成功消息正确显示，然后根据需要逐渐消失。但是，一旦我添加了行以还原原始内容，就好像它显示原始内容，淡出，然后替换原始内容。

我看不到我的成功消息没有显示的任何理由，因为我添加了行以还原内容。

来自Ajax的数据的控制台日志显示我

<style>.block .notice.invalid{display:none;}</style>
  <div class="alert alert-info">
  <strong>Stock updated</strong>
</div>

无论我是否尝试恢复内容，这都是相同的。

原始_content_qty的控制台日志

Stock: <input type="hidden" name="products_id" value="289"><input type="text" name="products-quantity" value="0" size="4" class="product_quantity_input_289">

我是否在尝试还原内容的方式上犯了一个错误？

Answer 1

我摆弄了一些东西，您需要将步骤链接到他们自己的回调中

$(document).ready(function() {
  // Variable to hold original content
  var original_content_qty = '';
  var form = $('.product-qty-42')
  form.submit(function(e) {
    e.preventDefault();
    $.ajax({
        url: 'submit.php',
        type: 'POST',
        data: $(this).serialize(),
        dataType: 'html'
      })
      .done(function(data) {
        var elem = $('.qty-update-42');
        var original_content_qty = elem.html();
        console.log(original_content_qty);
        console.log(data);
        elem.fadeOut('slow', function() {
          elem.html(data).fadeIn('slow', function() {
            elem.delay(1200).fadeOut('slow', function() {
              elem.html(original_content_qty).fadeIn('slow');
            });
          });
        });
      })
      .fail(function() {
        alert('Ajax Submit Failed ...');
      });
  });
});
$.mockjax({
  url: "submit.php",
  responseText: '<p>Worked</p>'
});

<form class="product-qty-42">
  <div class="qty-update-42">
    <input type="hidden" name="products_id" value="289"><input type="text" name="products-quantity" value="0" size="4" class="product_quantity_input_289">
  </div>
  <input type="submit" name="send">
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-mockjax/1.6.2/jquery.mockjax.min.js"></script>