一意のIDを持つ動的に生成されたdiv

Question

このコードはdivを生成します。新しいIDはそれぞれ異なるIDで生成されます。ボタンを1回押すと、すべてが機能します。 2回目のプレスの後、作成された最初のdivのIDは、作成された新しいdivと同じになります。過去のdiv idが変更されないようにするにはどうすればよいですか？

var newdiv = 11; 
var newimg = 7; 
var lastimg = 0; 
var divid = ""; 

$(document).ready(function(){ 

$("#divcreate").click(function(){ 
    divid = "div"+newdiv; 
    $("#adddivs").append('<td><div id="div'+ newdiv +'" ondrop="drop(event, divid)" ondragover="allowDrop(event, divid)"><img id="drag'+ newimg +'" src="#" alt="your image" draggable="true" ondragstart="drag(event)" width="100" height="100"/></div></td>'); 
    $("#div"+newdiv).css({"width": "100px", "height": "100px", "margin": "10px", "padding": "10px", "border": "1px dashed orange", "border-radius": "15px"}); 
    newdiv += 1; 
    newimg += 1; 
}); 
}); 

Answer 1

あなたのコードはこのスニペットで正常に動作しているようです。

var newdiv = 11; 
 
var newimg = 7; 
 
var lastimg = 0; 
 
var divid = ""; 
 

 
$(document).ready(function(){ 
 

 
$("#divcreate").click(function(){ 
 
    divid = "div"+newdiv; 
 
    $("#adddivs").append('<td><div id="div'+ newdiv +'" ondrop="drop(event, divid)" ondragover="allowDrop(event, divid)"><img id="drag'+ newimg +'" src="#" alt="your image" draggable="true" ondragstart="drag(event)" width="100" height="100"/></div></td>'); 
 
    $("#div"+newdiv).css({"width": "100px", "height": "100px", "margin": "10px", "padding": "10px", "border": "1px dashed orange", "border-radius": "15px"}); 
 
    newdiv += 1; 
 
    newimg += 1; 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="adddivs"></div> 
 
<button id="divcreate">click</button>

Answer 2

私はこれをチェックアウトし、それがうまく働いた：

var newdiv = 11; 
 
var newimg = 7; 
 
var lastimg = 0; 
 
var divid = ""; 
 

 
$(document).ready(function(){ 
 

 
$("#divcreate").click(function(){ 
 
    divid = "div"+newdiv; 
 
    $("#adddivs").append('<td><div id="div'+ newdiv +'" ondrop="drop(event, divid)" ondragover="allowDrop(event, divid)"><img id="drag'+ newimg +'" src="#" alt="your image" draggable="true" ondragstart="drag(event)" width="100" height="100"/></div></td>'); 
 
    $("#div"+newdiv).css({"width": "100px", "height": "100px", "margin": "10px", "padding": "10px", "border": "1px dashed orange", "border-radius": "15px"}); 
 
    newdiv += 1; 
 
    newimg += 1; 
 
}); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="divcreate">Click !</div> 
 
<div id="adddivs"></div>

をしかし、あなたは、このコードに問題がある場合、あなたはに変数を定義することができます$(document).ready(function(){、コードは次のようになります：

$(document).ready(function(){ 
 
var newdiv = 11; 
 
var newimg = 7; 
 
var lastimg = 0; 
 
var divid = ""; 
 

 
$("#divcreate").click(function(){ 
 
    divid = "div"+newdiv; 
 
    $("#adddivs").append('<td><div id="div'+ newdiv +'" ondrop="drop(event, divid)" ondragover="allowDrop(event, divid)"><img id="drag'+ newimg +'" src="#" alt="your image" draggable="true" ondragstart="drag(event)" width="100" height="100"/></div></td>'); 
 
    $("#div"+newdiv).css({"width": "100px", "height": "100px", "margin": "10px", "padding": "10px", "border": "1px dashed orange", "border-radius": "15px"}); 
 
    newdiv += 1; 
 
    newimg += 1; 
 
}); 
 
});