具有唯一的ID克隆DIV不工作

我敢肯定，我很接近，但我不知道我錯過了什麼：具有唯一的ID克隆DIV不工作

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>

來源

2012-12-09 max7

你可以發佈你的HTML嗎？ – techfoobar

只是增加了它，遺憾遺憾。 – max7

你的html中的＃new-div在哪裏？ – 3dgoo

的問題是，你改變你的元素的ID前克隆和追加，導致2個元素具有相同的ID，打破了你的選擇和代碼。

Fixed Live Demo

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

來源

2012-12-09 03:40:44

我的原始代碼的優秀擴展。事實上，3dgoo指出了核心問題：我刪除了＃new-div，並且從未替換它！我的鏈接順序也不正確，但第一個錯誤是主要的。不過，你寫的很棒。問題：你能解釋一下var $ newSecretDiv的用法，特別是使用$來設置變量，以及爲什麼沒有（我假設）調用jQuery對象時它不起作用。 – max7

在變量名稱之前附加$的原因是爲了清楚地將該變量標記爲jQuery對象。沒有$，在一個大的解決方案中，我或團隊成員可能會忘記這已經是一個jQuery對象，並且會寫入不必要的代碼來降低性能。 –

您當前的代碼是在克隆之前應用新的id，這意味着它正在更改現有div的id。這又意味着下次單擊處理程序被調用時，將不會有與選擇器'＃new-div'匹配的div。

嘗試應用ID或者克隆後，或將其插入到DOM後：

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

來源

2012-12-09 03:40:43

你正試圖克隆＃新格，除非你目前的div被命名爲 '新格'。此外，您正在更改原始div的ID，而不是使用生成的ID創建一個新ID。

來源

2012-12-09 03:41:34 qooplmao

具有唯一的ID克隆DIV不工作

回答

相關問題