jQuery组合按钮点击事件失效问题求助

Hey there! I see exactly what's going on with your button interaction—let's break this down and fix it together.

The Root Problem #

When you use .replaceWith() to swap out the original #reset button for the #resetGroup, you're completely removing the original button from the DOM. Later, when you replace #resetGroup back with a new #reset button, this is a brand new DOM element—it doesn't have the click event binding you set up on the original button. That's why it stops working after the first cycle!

Your initial $("#reset").click(...) only binds the event to the first #reset button that exists when the page loads. Dynamic elements added later won't inherit that binding automatically.

The Fix: Event Delegation #

The best way to handle events on dynamically created elements is to use event delegation. Instead of binding the event directly to the button, you bind it to a parent element (or even document) that exists when the page loads, and tell it to listen for clicks on any element matching the #reset selector—even if that element is added later.

Here's how to adjust your code:

// Use event delegation to listen for clicks on #reset, even dynamic ones
$(document).on('click', '#reset', function() {
  $(this).replaceWith(
    '<div id="resetGroup" class="btn-group btn-group-justified" role="group">'
    + '<div class="btn-group" role="group">'
    + '<input id="cancel" type="button" class="btn btn-danger" value="CANCEL" />'
    + '</div>'
    + '<div class="btn-group" role="group">'
    + '<input id="clear" type="button" class="btn btn-success" value="CLEAR" />'
    + '</div></div>'
  );

  // Cancel button functionality
  $(document).on('click', '#cancel', function() {
    $("#resetGroup").replaceWith(
      '<input class="btn btn-default btn-block" id="reset" type="button" value="RESET" />'
    );
    // Unbind the cancel event after use to avoid duplicates
    $(document).off('click', '#cancel');
  });

  // Clear button functionality (add your reset logic here!)
  $(document).on('click', '#clear', function() {
    // Example reset action: clear form inputs
    $('form input').val('');
    
    $("#resetGroup").replaceWith(
      '<input class="btn btn-default btn-block" id="reset" type="button" value="RESET" />'
    );
    // Unbind the clear event after use to avoid duplicates
    $(document).off('click', '#clear');
  });
});

Key Changes Explained: #

• $(document).on('click', '#reset', function() { ... }): This listens for any click event that bubbles up to the document and matches the #reset selector. It works for both the initial button and any new #reset buttons you create later.
• We also use event delegation for #cancel and #clear, then call $(document).off('click', '#cancel') after the button is used. This prevents multiple event bindings from stacking up if you cycle through the buttons multiple times.
• Removed the .unbind("click") call on the original reset button—it's no longer needed because the event is delegated, and the original element is being replaced anyway.

Bonus Tip (Cleaner Approach) #

Instead of completely replacing elements, you could also toggle the visibility of the reset button and the button group. This avoids destroying and recreating elements entirely, which can be more efficient:

// HTML: Include both the reset button and group in your markup, hide the group initially
// <input class="btn btn-default btn-block" id="reset" type="button" value="RESET" />
// <div id="resetGroup" class="btn-group btn-group-justified" role="group" style="display:none;">
//   ... cancel and clear buttons ...
// </div>

// JS: Toggle visibility instead of replacing elements
$(document).on('click', '#reset', function() {
  $(this).hide();
  $('#resetGroup').show();
});

$(document).on('click', '#cancel', function() {
  $('#resetGroup').hide();
  $('#reset').show();
});

$(document).on('click', '#clear', function() {
  // Reset form logic here
  $('form input').val('');
  
  $('#resetGroup').hide();
  $('#reset').show();
});

This approach keeps your DOM elements intact, so you don't have to worry about re-binding events at all—plus it's simpler to read and maintain!

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