まず、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
});