AJAX .html(data) 如果我之后尝试恢复原始内容则不显示

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>

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

original_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>

AJAX .html(data) 如果我之后尝试恢复原始内容则不显示

AJAX .html(data) not displaying if I attempt to restore original content afterwards

javascript

ajax

jquery-ajaxq