Question

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

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

我正在发布我自己的问题的解决方案。我找到了一条路。

克隆包含滑块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;

});

} }）;

jquery ui滑块克隆问题

1 个答案: