求助：恢复原始内容后AJAX的.html(data)无法正常显示

It looks like the core issue here is how you're storing the original content of your quantity element. Right now, you're overwriting the original_content_qty variable every time your AJAX call completes—meaning after the first submission, it no longer holds the true original page content, but instead the previous AJAX response. That's why when you try to restore and then update again, things break.

Here's how to fix this, plus some improvements to make your code more robust:

Corrected Code #

$(document).ready(function() { 
  // 🔑 Save the original content ONCE when the page loads, not after each AJAX call
  var original_content_qty = $('.qty-update-<?php echo $products->fields['products_id']; ?>').html(); 

  // Cache your elements to avoid re-selecting them multiple times
  var $qtyForm = $('.product-qty-<?php echo $products->fields['products_id']; ?>');
  var $qtyDisplay = $('.qty-update-<?php echo $products->fields['products_id']; ?>');

  $qtyForm.submit(function(e) { 
    e.preventDefault(); 

    $.ajax({ 
      url: 'submit.php', 
      type: 'POST', 
      data: $(this).serialize(), 
      dataType: 'html' 
    }).done(function(data) { 
      // First, verify you're getting valid data back from the server
      console.log('Received AJAX data:', data);
      
      // Update the display with the new content
      $qtyDisplay.html(data);
    }).fail(function(xhr, status, error) {
      // Handle AJAX failures gracefully by restoring original content
      console.error('AJAX request failed:', error);
      $qtyDisplay.html(original_content_qty);
    });
  });

  // Example: If you have a button to restore original content
  $('.restore-qty').click(function() {
    $qtyDisplay.html(original_content_qty);
  });
});

Key Changes Explained #

1. Store original content on page load: By setting original_content_qty when the document first loads, you ensure it always holds the unmodified content from the initial page render—never overwritten by AJAX responses.
2. Cache DOM elements: Storing references to your form and display element in variables ($qtyForm, $qtyDisplay) makes your code faster and avoids potential selector errors if the DOM changes.
3. Add error handling: The .fail() callback ensures that if the AJAX request fails, your display reverts to the original content instead of staying in a broken state.
4. Debug with console logs: Checking the data variable in the .done() callback lets you confirm that submit.php is returning the correct HTML content (if it's empty or invalid, that's another issue to fix server-side).

Additional Checks #

• Make sure the selector for your quantity display element (qty-update-<?php echo $products->fields['products_id']; ?>) is correctly targeting the right element every time—double-check the rendered HTML to confirm the class matches.
• If you're restoring content programmatically (not just via a button), ensure you're using the original_content_qty variable directly, not overwriting it anywhere else in your code.

内容的提问来源于stack exchange，提问作者Steve Price