Question

我正在尝试克隆其中包含另一个克隆的元素。问题是子克隆在父元素内有效，但在父元素的克隆内无效

// Parent clone
    $('.experiences').on('click', '.experience_delete', function() {
         $(this).closest('.experience_cloned').remove(); 
    });
    $('.experiences').on('click', '.experience_increment', function() {
        $('.experience_increment').closest('.experiences').find('.experience_cloned').first().clone().append($('<br><button class="experience_delete" type="button">Delete</button>')).appendTo('.clone-experience');
    });
    
    
    //Child clone
    $('.best_project').on('click', '.best_project_delete', function() {
         $(this).closest('.best_project_cloned').remove(); 
         //alerts can be added here
    });

    $('.best_project').on('click', '.best_projects_increment', function() {
        $(this).closest('.best_project').find('.best_project_cloned').first().clone().append($('<br><button class="best_project_delete" type="button">Delete</button>')).appendTo('.clone-best_projects');
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This is a Parent Clone    
    <!-- Parent Clone -->
    <div class="experiences">
        <!-- Parent Clone Contents -->
        <div class="experience_cloned" style="padding-bottom: 20px;">

            <div style="border:1px solid black; padding:20px; width: 120px;">
              <!-- Child Clone -->
              <div class="best_project">

                    <!-- Child Clone Contents -->
                    <div class="best_project_cloned">  
                        This is a Child 
                    </div>

                    <!-- Child's Clones Here -->
                    <div class="clone-best_projects"></div>

                    <!-- Add button of the Child Clone-->
                <div>
                    <br>
                    <button class="best_projects_increment" type="button">Add Child Clone</button>
                </div>
  
              </div>   
            </div>     
        </div> 

        <!-- Parent's Clones Here -->
        <div class="clone-experience"></div>

        <!-- Add button of the parent Clone -->
        <div>
            <button class="experience_increment " type="button">Add Parent Clone</button>
        </div>

我希望我的问题很清楚，我一直在努力寻找正确的词来问我需要什么。

Answer 1

在创建新元素时未设置事件克隆父级后，您只需要设置单击事件。在这里，我创建了一个函数set_Child_Clone_Events();，该函数在新克隆的子项上设置了事件

脚本

// Parent clone
                $('.experiences').on('click', '.experience_delete', function() {
                     $(this).closest('.experience_cloned').remove(); 
                });
                $('.experiences').on('click', '.experience_increment', function() {
                    
    
    $('.experience_increment').closest('.experiences').find('.experience_cloned').first().clone().append($('<br><button class="experience_delete" type="button">Delete</button>')).appendTo('.clone-experience');
                set_Child_Clone_Events()
            });
        
        // call Child clone function
            set_Child_Clone_Events()
            
        //Child clone function
            function set_Child_Clone_Events() {
            $('.best_project').on('click', '.best_project_delete', function() {
                 $(this).closest('.best_project_cloned').remove(); 
                 //alerts can be added here
            });
        
$(".best_projects_increment").unbind().click(function() {
                var obj = $(this)
                $(this).parents('.best_project').find('.best_project_cloned').first().clone().append($('<br><button class="best_project_delete" type="button">Delete</button>')).appendTo($(obj).parents('.best_project').find('.clone-best_projects'));
                set_Child_Clone_Events()
              })
            }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
        This is a Parent Clone    
        <!-- Parent Clone -->
        <div class="experiences">
            <!-- Parent Clone Contents -->
            <div class="experience_cloned" style="padding-bottom: 20px;">
    
                <div style="border:1px solid black; padding:20px; width: 120px;">
                  <!-- Child Clone -->
                  <div class="best_project">
    
                        <!-- Child Clone Contents -->
                        <div class="best_project_cloned">  
                            This is a Child 
                        </div>
    
                        <!-- Child's Clones Here -->
                        <div class="clone-best_projects"></div>
    
                        <!-- Add button of the Child Clone-->
                    <div>
                        <br>
                        <button class="best_projects_increment" type="button">Add Child Clone</button>
                    </div>
    
                  </div>   
                </div>     
            </div> 
    
            <!-- Parent's Clones Here -->
            <div class="clone-experience"></div>
    
            <!-- Add button of the parent Clone -->
            <div>
                <button class="experience_increment " type="button">Add Parent Clone</button>
            </div>
    
        </div>

在另一个克隆中克隆。儿童克隆仅在父级内部起作用，而在父级克隆内部不起作用

1 个答案:

脚本