4

我有一个 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。但是当数字为2时，克隆包含“changemain2”而不是maindiv。为什么是这样？？有什么办法吗？？？

4

3 回答 3

4

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

接下来，您的变量number是本地的并重新定义并重置为1每个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;
}

此外，最好使用.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;
}

解决方案：

问题在于使用的方法。使用克隆的元素.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
});

演示

于 2012-11-06T10:10:23.747 回答
1

问题在于你的变量号，它必须在外面声明

于 2012-11-06T10:12:35.927 回答
1

好吧........好吧，我们亲爱的函数 clone() 基本上维护了一个引用。我只是把声明

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

在委托声明中：

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

现在它是如何工作的......不知道......但是在紧迫的期限内......你永远不会想太多......Njoi！

于 2012-11-06T12:13:52.010 回答