javascript - 使用唯一 ID 克隆 div 不起作用

Question

我很确定我很接近，但我不知道我错过了什么：

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>

Answer 1

问题是您在克隆和附加之前更改了元素的 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);
});​

Answer 2

您当前的代码在克隆之前应用新 id，这意味着它正在更改现有 div 的 id。这反过来意味着下一次调用单击处理程序时，将不会有与选择器“#new-div”匹配的 div。

尝试在克隆之后或将其插入 DOM 之后应用 id：

var newId = 1;
$("#trigger").click(function(){
    $("#new-div").clone().attr('id', 'new-div' +newId++).appendTo("#myDiv");
});

或者

var newId = 1;
$("#trigger").click(function(){
    $("#new-div").clone().appendTo("#myDiv").attr('id', 'new-div' +newId++);
});

Answer 3

您正在尝试克隆#new-div，除非您当前的 div 被命名为“new-div”。此外，您正在更改原始 div 的 id，而不是使用生成的 id 创建一个新 div。