jquery ui滑塊克隆問題

我有一個主要的div和裏面那個div有一些其他元素，其中包括一個sliderdiv。我正在嘗試克隆主分區n次。除克隆的滑塊外，其他所有元素都可以正常工作。每當我嘗試滑動克隆的時候，第一個滑塊都會移動。jquery ui滑塊克隆問題

$(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>

來源

2013-07-23 user2611040

我張貼解決我自己的問題。我找到了一個方法。

克隆父div包含slider div和其他元素。
從克隆父DIV刪除滑塊的div

添加新的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; 

});

} } ）;

來源

2013-07-25 17:30:20 user2611040

jquery ui滑塊克隆問題

回答

相關問題