Changes the clone of the div change as the original div.

Question

I have a div "maindiv". It also 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 adding copydiv, the added clone has an id like "maindiv", and all internal divs have the correct value. But when the number is 2, the clone contains "changemain2" instead of from maindiv.WHY is this ?? Any medicine ????

Answer 1

First, Id must be unique in the DOM. In this case, when you add multiple sets, switch to the class selector.

Then your variable number is local and overridden, and reset is 1 on each 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 the .on()

 $("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; } 

---

Decision:

The problem was using the method. Elements cloned using .clone() will contain a link, so instead of adding a new element, it will continue to update 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

Answer 2

The problem is with your variable number, it must be declared out

Answer 3

Alrighty ........ Well, our dear clone () function basically supports the link. I just posted the instructions

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

inside the delegate statement:

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

How it works now ... no idea ... but when in a short time ... you never think too much ... Njoi!