0

メインの 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>
4

1 に答える 1

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;

});

    } });

于 2013-07-25T17:30:20.327 に答える