jquery - 随着原始 div 的更改，div 的克隆也随之更改

Question

我有一个 div“maindiv”。这里面还有 div，包括“imagediv”。在 jQuery 中，我写:

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

对于这段代码，第一次追加copydiv后，添加的克隆的id为“maindiv”，所有内部div都有正确的id。但是当number为2时，克隆包含“changemain2” maindiv.WHY 这是？有什么补救措施吗？？？？

Answer 1

首先，Id 在 DOM 中必须是唯一的。在这种情况下，如果您要附加多个集合，请切换到类选择器。

接下来，您的变量 number 是本地变量，在每次 mousedown

时重新定义并重置为 1

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;
}

此外，最好使用 .on() 函数进行委托(delegate)

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

---

解决方案:

问题在于使用的方法。使用 .clone() 克隆的元素将保留引用，因此它不会添加新元素，而是会不断更新以前引用的对象。

解决方法如下:

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