使用.load()后.remove-transaction点击函数失效的问题求助

Hey there! I totally get the frustration—you’ve got that smooth AJAX-powered table refresh working with .load(), but those delete icons (.remove-transaction) only function after a full page reload. Let’s break down why this happens and fix it right away.

Why the Click Events Stop Working #

When you use .click() to bind events like this:

$('.remove-transaction').click(function() {
  // Your delete logic here
});

jQuery only attaches that event to elements that exist when the page first loads. When you use .load() to replace the table content, those new .remove-transaction elements weren’t present during the initial binding, so they don’t have the click event attached to them.

The Solution: Event Delegation #

Instead of binding the event directly to the dynamic elements, you’ll bind it to a static parent element (one that exists when the page loads) and use event delegation to listen for clicks on the target selector.

Here’s how to adjust your code:

// Replace your old .click() binding with this
$('#payment-body').on('click', '.remove-transaction', function(e) {
  e.preventDefault(); // Prevent default link behavior if needed
  
  // Grab necessary data (like transaction ID) from the element
  const transactionId = $(this).data('transaction-id'); // Adjust to match your markup
  
  // Your delete logic goes here—example with AJAX:
  $.ajax({
    url: 'your-delete-endpoint.php',
    method: 'POST',
    data: { 
      transaction_id: transactionId,
      client_id: c_id // Reuse your existing c_id variable
    },
    success: function(response) {
      // Option 1: Remove the clicked row instantly
      $(this).closest('tr').remove(); 
      // Option 2: Re-refresh the entire table (if you need to sync other data)
      // $('#payment-body').load('client-info.php?id='+c_id+' #payment-body');
    },
    error: function() {
      alert('Oops, something went wrong deleting that transaction.');
    }
  });
});

Key Tips: #

• Use the closest static parent: I used #payment-body because it’s the container you’re reloading—make sure this element exists on page load (it does, since you’re loading content into it!). Avoid binding to document unless you have no other choice, as it can hurt performance.
• How event delegation works: When you click the .remove-transaction icon, the click event bubbles up to the parent element (#payment-body), which checks if the clicked element matches the selector. This works for all current and future elements that match .remove-transaction.

This should have those delete icons working perfectly right after your .load() call, no page refresh required!

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