jQuery克隆动态section内Add Main按钮失效问题求助

Hey there, the problem you're hitting is super common when working with dynamically created elements: your original click event only binds to the buttons that exist when the page first loads. Any new "Add Main" buttons you clone into new sections don't have that event attached, so clicking them does nothing.

Here's the fixed code with explanations of the key changes:

jQuery(function($){ 
    // Use a single unique_id counter to avoid duplicate IDs across both section and main clones
    let unique_id = 0; 

    // Handle cloning entire sections
    $('.sectionClick').on('click', function(){ 
        $(".section .row2:first").clone().find("h4,div,input,select").each(function() { 
            const newSuffix = "_" + unique_id;
            const originalName = $(this).attr("name");
            const originalId = $(this).attr("id");
            
            if (originalName) this.name = originalName + newSuffix;
            if (originalId) this.id = originalId + newSuffix;
            this.value = ''; // Clear input values
            
            // Update label's 'for' attribute to match the new input ID
            $(this).siblings('label').attr('for', originalId + newSuffix);
        }).end().appendTo(".section"); 
        unique_id++; 
    }); 

    // Handle cloning main sections - use EVENT DELEGATION for dynamic buttons
    $('.section').on('click', '.click', function(){ 
        // Find the main container *within the current section* of the clicked button
        const $currentMain = $(this).closest('.row2').find('#main');
        
        $currentMain.find(".row1:first").clone().find("input,select").each(function() { 
            const newSuffix = "_" + unique_id;
            const originalName = $(this).attr("name");
            const originalId = $(this).attr("id");
            
            if (originalName) this.name = originalName + newSuffix;
            if (originalId) this.id = originalId + newSuffix;
            this.value = ''; // Clear input values
            
            $(this).siblings('label').attr('for', originalId + newSuffix);
        }).end().appendTo($currentMain); 
        unique_id++; 
    }); 
});

Key Fixes & Improvements: #

• Event Delegation for Dynamic Buttons
  Instead of binding directly to .click buttons, we bind the event to the static .section container (which exists on page load). The event will "bubble up" to this container, triggering for any .click button inside it—even ones added later via cloning.
• Target the Correct Main Container
  Using $(this).closest('.row2').find('#main') ensures we're cloning content into the main container that belongs to the section where the "Add Main" button was clicked, not the original first section.
• Single Unique ID Counter
  Your original code had two separate unique_id variables, which could lead to duplicate IDs across sections and main clones. Now we use one shared counter to keep all IDs unique.
• Fix Label-to-Input Association
  Updated the label's for attribute to use the new generated ID instead of the original name, so labels still work correctly for cloned inputs.

Quick HTML Cleanup Tip: #

Having multiple elements with the same id="main" is invalid HTML (IDs must be unique). Consider changing that to a class instead:

<!-- Replace id="main" with class="main" -->
<div class="main"> 
    <div class="row1"> 
        <!-- ... input fields ... -->
    </div>
</div>

Then update the JS selectors from #main to .main to match.

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