I need to create 10 buttons dynamically with Jquery and set the text on them to be 1 -10, and add the same click event to all of them.
Should I be using dom create element or something other?
Add a comment
|
5 Answers
$(document).ready(function() {
for(i = 1; i <=10; i++) {
$('<button/>', {
text: i, //set text 1 to 10
id: 'btn_'+i,
click: function () { alert('hi'); }
});
}
});
Hope it helps
9 Comments
griegs
Oooh, I like this. +1. However, this assumes all the buttons perform the same function. You'd now also need to call a function that tests the id and calls another one me thinks
Andy
The
$('<button />', {}) syntax is really neat, never seen that before.
McGafter
I can't get this to show any buttons unfortunately.
Sudhir Bastakoti
@KingstonFortune Yes it does not display any button. It just does what was asked, i.e create buttons, set text and then add click event to all of them. Apart from doing this, you need to use
append() in order to display it.Sudhir Bastakoti
@UmairAhmed yes, check this section jQuery Create Element
|
try this:
var something = $('<input/>').attr({ type: 'button', name:'btn1', value:'a button' });
now append this to your div (in this example, it has the id "item"):
$("#item").append(something);
of course, for dynamic values, you need to do it inside a loop with iterated values of the name or ID field of the button..
hope explaining the concept helps :)
3 Comments
shaan
I have adapted this solution to add button in one of the columns in my HTML table where I am also adding rows dynamically. How do I add
ids to the buttons so that each button in a row has unique id?
sree
one of the option would be to add row number to the id. that way you can access row with that id and resulting button id as well.
shaan
Is there a way I may add an image e.g. a tool icon in the attribute
.attr() so that it appears on the button?I created this little guy. Think the individual functions are overkill, but this is what the question asked for(i think):
https://jsfiddle.net/mmv1219/koqpzrar/1/
html:
<button type="button" id="Delta1">Blast Off!</button>
<div id="insertHere"></div>
JavaScript:
$('#Delta1').click(function () {
var functions = ['btn1()', 'btn2()', 'btn3()', 'btn4()', 'btn5()', 'btn6()', 'btn7()', 'btn8()', 'btn9()', 'btn10()'];
var div = document.getElementById('insertHere');
var ctr = 1;
for (var i in functions) {
var btn = document.createElement('button');
var txt = document.createTextNode(String(ctr));
btn.appendChild(txt);
btn.setAttribute('type', 'button');
btn.setAttribute('onclick', functions[i]);
btn.setAttribute('id', 'button' + ctr);
div.appendChild(btn);
ctr++;
}
});
function btn1() {alert('button 1');}
function btn2() {alert('button 2');}
function btn3() {alert('button 3');}
function btn4() {alert('button 4');}
function btn5() {alert('button 5');}
function btn6() {alert('button 6');}
function btn7() {alert('button 7');}
function btn8() {alert('button 8');}
function btn9() {alert('button 9');}
function btn10() {alert('button 10');}
Comments
See this on how to create elements using jQuery What is the most efficient way to create HTML elements using jQuery?
Also, once you have created the element, to attach events you'll need to use the Live() keyword.
$("#btn1").live("click", function(){
//Do work
});
1 Comment
mrtsherman
live is deprecated as of jQuery 1.7 and not recommended for use as of 1.4.2. For 1.7+ delegate or on are recommended and for 1.4.2+ delegate.Below is the sample for displaying the buttons and call your own function and pass the button number as parameter.
for(i = 1; i <=10; i++) {
$('<div class = "dynmic-buttons">')
.append($('<button/>', {
text:i,
id:'dyn-btn'+i,
click: function () { DYNFUNC.dynBtnClicked($(this).text()); }
}))
.appendTo($('#dynamic-btn-container'));
}
Here is the function for button click, which displays text of respective button
;DYNFUNC = { dynBtnClicked (data) {
alert('Clicked dynamic button no:'+data);
}
}
