jquery - jquery ui滑块克隆问题

Question

我有一个主 div，在那个 div 里面还有几个其他元素，包括一个 sliderdiv。我正在尝试克隆主 div n 次。除了克隆的滑块之外，所有其他元素都工作正常。每次我尝试滑动克隆的滑块时，第一个滑块都会移动。

 $(document).ready(function () {
    $('#slider').slider();

    $('#btn').click(function () {

        //here finding total number of main div, cloning the last added div 
        var currentCount = $('.repeatingSection').length;
        var lastRepeatingGroup = $('.repeatingSection').last();
        var lastdivID = lastRepeatingGroup.attr('id');
        var cloneddiv = lastRepeatingGroup.clone(true, true);

        //changing the main div id
        $(cloneddiv).attr('id', lastdivID + currentCount);

        //calling a method to change ID of all the elements inside the cloned div
        ChangeClonedDivWithNewID(cloneddiv, currentCount);
        //adding cloned div at the end   
        cloneddiv.insertAfter(lastRepeatingGroup);
        return false;
    });

    function CreateSlider(sliderdivID) {
        $("#" + slider).slider();
    }

    function ChangeClonedDivWithNewID(elem, counter) {
        alert("enterred into function");
        $(elem).find("[id]").each(function () {
            this.id = this.id + counter;
            var x = this.id;
            //checking for div with slider id and then adding slider to cloned div
            if (this.id == "slider" + counter) {
                CreateSlider(this.id);
            }
        });
    }
});

html

<form id="form1" runat="server">
<div class="repeatingSection" id="repeatdiv">
    <div id="slider" class="sliderclass">
    </div>
    <asp:Label ID="lbl" runat="server"></asp:Label>
    <asp:DropDownList ID="gender" class="ddgender" runat="server" ViewStateMode="Enabled">
        <asp:ListItem Text="" Value="-1" Selected="true"></asp:ListItem>
        <asp:ListItem Text="male" Value="1" Selected="False"></asp:ListItem>
        <asp:ListItem Text="female" Value="0" Selected="False"></asp:ListItem>
    </asp:DropDownList>
    <label id="add" class="add">
        Add New</label>
    <label id="remove" class="remove">
        Remove</label>
</div>
<asp:Button ID="btn" Text="clone" runat="server" />
</form>

Answer 1

我正在发布针对我自己的问题的解决方案。我找到了解决办法。

1. 克隆包含滑块 div 和其他元素的父 div。

2. 从克隆的父 div 中删除滑块 div

3. 将新的 div 添加到父 div 以替换已删除的 div

   这是我的工作代码：

   $(document).ready(function(){
   CreateSlider("slider");
   $('.add').click(function(){
   
   
   var currentCount = $('.repeatingSection').length;
   var lastRepeatingGroup = $('.repeatingSection').last();
   var lastdivID = lastRepeatingGroup.attr('id');
   var cloneddiv = lastRepeatingGroup.clone(true, true);
   
   //changing the main div id
   $(cloneddiv).attr('id', lastdivID + currentCount);
   
   //Deleting Slider div from cloned parent div
     $(cloneddiv).find('.sliderclass').remove();
   
   
   //calling a method to change ID of all the elements inside the cloned div
   ChangeClonedDivWithNewID(cloneddiv, currentCount);
   
   //Creating a new div and adding it to cloned parent div
      var div = $("<div>", { id: "slider"+ currentCount, class: "sliderclass" });
       $(cloneddiv).prepend(div);
   
   //adding cloned div at the end   
   cloneddiv.insertAfter(lastRepeatingGroup);
   
   //add slider to the cloned parent div
       CreateSlider($(div).attr('id'));
       return false;
   });
   
   function CreateSlider(sliderdivID) {
       $("#" + slider).slider();
   }
   
   function ChangeClonedDivWithNewID(elem, counter) {
       $(elem).find("[id]").each(function () {
       this.id = this.id + counter;
       var x = this.id;
   
   });
   

   } });