我很确定我很接近,但我不知道我错过了什么:
var newId = 1;
$("#trigger").click(function(){
$("#new-div").attr('id', 'new-div' +newId++).clone().appendTo("#myDiv");
});
我设置了断点:我可以看到计数器自动递增,但克隆的div不会出现在它应该的位置。我没有错。用于此的HTML:
<div id="secret-div" style="display: none;">
<div>This is new div number </div>
</div>
<p><a id="trigger" href="javascript:void(0);">Please, add an element</a></p>
<div id="myDiv"></div>
答案 0 :(得分:2)
问题是您在克隆和追加之前更改了元素的ID,导致2个元素具有相同的ID,从而破坏了选择器和代码。
HTML:
<div id="secret-div" style="display:none;">
<div>This is new div number <span class="spnNewDivNumber"></span></div>
</div>
<p><a id="trigger" href="javascript:void(0);">Please, add an element</a></p>
<div id="myDiv"></div>
JavaScript的:
var newId = 1;
$("#trigger").click(function() {
var $newSecretDiv = $("#secret-div").clone().attr('id', 'new-div' + newId++);
$newSecretDiv.show().appendTo("#myDiv");
$newSecretDiv.find('.spnNewDivNumber').text(newId - 1);
});
答案 1 :(得分:1)
您当前的代码在克隆之前应用新ID,这意味着它正在更改现有div的ID。这反过来意味着下次调用click处理程序时,不会有与选择器'#new-div'匹配的div。
尝试在克隆之后或在将其插入DOM之后应用id:
var newId = 1;
$("#trigger").click(function(){
$("#new-div").clone().attr('id', 'new-div' +newId++).appendTo("#myDiv");
});
OR
var newId = 1;
$("#trigger").click(function(){
$("#new-div").clone().appendTo("#myDiv").attr('id', 'new-div' +newId++);
});
答案 2 :(得分:0)
您正在尝试克隆#new-div,除非您当前的div名为'new-div'。此外,您正在更改原始div的ID,而不是使用生成的ID创建新的。