CODEWITHSUNDEEP
jquerycssclone
Bhumi Singhal
Bhumi Singhal

Reputation: 8307

Clone of a div changing as the original div is being changed

I have a div "maindiv". This further has divs inside it including "imagediv". In jQuery, I write :

$(document).ready(function() {

    ......

    var copydiv = $('#maindiv').clone();
    var number = 1;
    $("body").delegate("#imagediv", "mousedown", function(event) {

        $("#maindiv").attr('id', "changedmain" + number);
        $("#imagediv").attr('id', "changedimage" + number);
        copydiv.insertAfter("#appendafter");
        number = number + 1;
    });
});​

HTML:

<div id="appendafter"></div>
<div id="maindiv">
.
.
.
</div>

For this code, for the first time after copydiv is appended, the clone that is added has id as "maindiv" and all the inner divs have the correct it.But when number is 2, the clone contains "changemain2" instead of maindiv.WHY is this?? Any remedy ????

Upvotes: 4

Views: 1115

Answers (3)

Bhumi Singhal
Bhumi Singhal

Reputation: 8307

Alrighty ........Well our dear function clone() basically maintains a reference. I simply placed the statement 

var copydiv = $('#maindiv').clone();

inside the delegate statement:

  $("body").delegate("#imagediv", "mousedown", function(event) {

How it is working now..no idea ...but when on tight deadlines ...you never get to think too much ...Njoi!

Upvotes: 1

Starx
Starx

Reputation: 79031

First, Id's have to unique in a DOM. On this, case where you are appending multiple sets, switch to class selectors.

Next, your variable number is local and redefined and reset to 1 on every mousedown

var copydiv = $('.maindiv').clone();  
var number = 1; // This was redefined and set as 1 on every `mousedown` 
                // So make it global

$("body").delegate(".imagediv","mousedown",function(event){       
    $(".maindiv").attr('class',"changedmain" + number);
    $(".imagediv").attr('class',"changedimage" + number );
    copydiv.insertAfter("#appendafter"); // You might have to change this too 
                                         // depending if this is repeated too
    number = number+1;
}

Also, It is preferable to delegate using a .on() function

$("body").on("mousedown", ".imagediv", function(event){       
    $(".maindiv").attr('class',"changedmain" + number);
    $(".imagediv").attr('class',"changedimage" + number );
    copydiv.insertAfter("#appendafter"); // You might have to change this too 
                                         // depending if this is repeated too
    number = number+1;
}

Solution:

The problem was with the method used. Elements cloned using .clone() will hold the reference, so instead of adding a new element it will keep updating previously referenced objects.

Here is the solution:

var number = 1; //Our Counter Script

function createDiv() {
    //Lets create a new div, 
             // I mean WHY CLONE AT the first place?? 
             // We are delegating events anyway :p

    $("<div />", {
        html : $('#maindiv').html(), // add the HTML of div we are trying to keep
             // ^ Better used cached 
             //   version is not updated regularly

        id : "maindiv-"+number       // add the generate id number 
    }).insertAfter("#appendafter");  // Now insert it
    number++;
}

$("body").on("mousedown", ".imagediv", function(event){
    createDiv(); //Delegating on all elements with `imagediv` class
});

Demo

Upvotes: 4

Yashpal Singla
Yashpal Singla

Reputation: 1994

The issue is with your variable number, it has to be declared outside

Upvotes: 1

Related Questions