What would be a good strategy for dealing with duplicated id's when using jquery clone method? For example, i need to clone a button in a unspecified number of times. Which is the best way for generating unique id's and keep track of it?
<div id="button-pool">
<button id="bt1" class="return">Button</button>
</div>
$(document).ready(function(){
$("#bt1").click(function(){
var newButton = $(this).clone();
$("#button-pool").append(newButton);
});
});
/
What would be a good strategy for dealing with duplicated id's when using jquery clone method? For example, i need to clone a button in a unspecified number of times. Which is the best way for generating unique id's and keep track of it?
<div id="button-pool">
<button id="bt1" class="return">Button</button>
</div>
$(document).ready(function(){
$("#bt1").click(function(){
var newButton = $(this).clone();
$("#button-pool").append(newButton);
});
});
http://jsfiddle/uv95nzrk/
Share Improve this question edited Sep 18, 2014 at 16:13 Huangism 16.4k7 gold badges50 silver badges75 bronze badges asked Sep 18, 2014 at 16:10 SavrigeSavrige 3,8053 gold badges36 silver badges40 bronze badges 3- 3 Have you considered assigning all your buttons a mon class and attaching the click function that way instead of through ids? – UtopiaLtd Commented Sep 18, 2014 at 16:12
- 1 utilize classes like @UtopiaLtd said. – Mike Commented Sep 18, 2014 at 16:13
- possible duplicate of Clone in JQuery and adding unique IDs for each – andy Commented Sep 18, 2014 at 16:15
6 Answers
Reset to default 3You can use an Attribute StartsWith Selector to see how many buttons with that same id naming style already exists:
"button[id^='bt']"
And append it increasing it by 1:
$(document).ready(function(){
$("#bt1").click(function(){
var idcount = $("button[id^='bt']").length;
var newButton = $(this).clone();
newButton.attr("id", "bt" + (idcount + 1));
$("#button-pool").append(newButton);
});
});.return{
background-color: yellow;
}
#bt1{
border: 2px solid navy;
}<script src="https://ajax.googleapis./ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="button-pool">
<button id="bt1" class="return">Button</button>
</div>Utilizing Classes to acheive this is a much better strategy, bloating your DOM with generated ID's is not really a great idea. (Poor Design Practice)
<div id="button-pool">
<button class="btns" custom-attr='1' class="return">Button</button>
</div>
$(document).ready(function(){
$(".btns").click(function(){
var newButton = $(this).clone();
newButton.attr('custom-attr', parseInt(newButton.attr('custom-attr'))+1);
$("#button-pool").append(newButton);
});
});
You can also use custom attributes to track your buttons so that they're still unique from one another, but they don't really need to have ID's
Something like this should work
var count = 0;
$("#bt1").click(function(){
var newButton = $(this).clone();
newButton.attr("id", "bt"+count);
$("#button-pool").append(newButton);
count++;
});
You can use a simple counter, and append it to the button id. This counter should be inside a closure not to interfere with the rest of the scripts in your page;
$(document).ready(function(){
var btnId = 1; // This is a safe place, inside a closure (function body).
$("#bt1").click(function(){
var newButton = $(this).clone();
newButton.attr('id','btn' + btnId);
btnId++; // Increment after creating each new button
$("#button-pool").append(newButton);
});
});
You can also create the buttons without ids, unless you really need them. Why do you need to keep track of them?
easy answer is use class instead of id.
$(document).ready(function(){
$("body").on('click','#bt1',function(){
var newButton = $(this).clone();
$("#button-pool").append(newButton);
});
});