How to access the programmatically generated elements using jQuery

Question

How can I access a dynamically created element using jQuery? Suppose I have the following code:

for (var i = 0; i < count; i++)
{
    var div = document.createElement("div");
    div.setAttribute("id", "divHour" + i);

    var button = document.createElement("button");
    button.setAttribute("id", "btnHour" + i);

    div.appendChild(button);
    document.getElementById("divHours").appendChild(div);
}

How can I access the buttons using jQuery?

bind them some data that you can use later. id, class, rel, anything should work. You can also use jquery's data function. — keune
– keune, Commented Nov 24, 2012 at 20:04

Billy Moon · Accepted Answer · 2012-11-25 10:17:59Z

1

To select the button inside your original loop...

for (var i = 0; i < count; i++)
{
    var div = document.createElement("div");
    div.setAttribute("id", "divHour" + i);

    var button = document.createElement("button");
    button.setAttribute("id", "btnHour" + i);

    div.appendChild(button);
    document.getElementById("divHours").appendChild(div);

    // moved after the button has been added to the DOM
    // do something with the button in jQuery
    $("#btnHour" + i).css({width:100})

}

edited Nov 25, 2012 at 10:17

answered Nov 24, 2012 at 20:19

Billy Moon

58.9k27 gold badges148 silver badges245 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

burakk Over a year ago

$("#btnHour" + i).click( function () { alert('the button was clicked!'); } ); does not seem to be working...

burakk Over a year ago

It works now, first I had to append the buttons to the div, and the div to the document. Thanks again.

Billy Moon Over a year ago

@burakk I put it last in your code block, which I think is how you got it working right?

Tony Arnold · Accepted Answer · 2012-11-24 20:08:16Z

1

As long as you know the HTML ID of the element. All you need to do is this:

$("#html_id")

jQuery uses CSS selectors.

answered Nov 24, 2012 at 20:08

Tony Arnold

6472 gold badges7 silver badges15 bronze badges

Comments

MrCode · Accepted Answer · 2012-11-24 20:12:18Z

1

Give the buttons a class:

div.setAttribute("class", "myButton");

Then you can get all of the buttons with

$('.myButton') ...

For example, to loop over them:

$('.myButton').each(function(){

    console.log($(this).attr("id"));

});

If you want to identify each button, parse the number out of the class or give it a data-mynumber attribute and use $(this).data('mynumber')

answered Nov 24, 2012 at 20:12

MrCode

64.6k10 gold badges95 silver badges114 bronze badges

Comments

Billy Moon · Accepted Answer · 2012-11-24 20:16:07Z

1

var $button0 = $('#btnHour0')
var $button1 = $('#btnHour1')
// ... etc ...

Once you have cached the jQuery object, use it as you wish...

$button0.css({width: 400}).animate({width: 200})

EDIT To access all buttons in a loop...

// assuming `count` is the same as the code used to create the buttons
for (var i = 0; i < count; i++){
    var $button = $('#btnHour'+i)
    // do stuff with $button here
}

EDIT

Alternatively, to access all button elements that have an ID that starts with btnHour

var $buttons = $('button[id^="btnHour"]')
// do stuff to all buttons here
$buttons.css({width:300})

edited Nov 24, 2012 at 20:16

answered Nov 24, 2012 at 20:07

Billy Moon

58.9k27 gold badges148 silver badges245 bronze badges

2 Comments

burakk Over a year ago

The problem is, I don't know how many buttons will be created, so I need a way like btnHour + i

Billy Moon Over a year ago

the number of buttons will be the same as count

charlietfl · Accepted Answer · 2012-11-24 20:26:39Z

1

var buttons=$('button[id^="btnHour"]');

Will give you the whole collection of buttons

Your question is extremely vague, I suspect you want to access a specific button contained within a div that user interacts with. More details are required as to what you want.

EDIT: following is how you can access the index of a button within a click handler.

var buttons=$('button[id^="btnHour"]').click(function(){
   var buttonIndex= buttons.index(this);
    var div=$('#divHour'+ buttonIndex)
    /* can now interact with corresponding div*/
});

Another simpler way to find the parent div is :

$('button[id^="btnHour"]').click(function(){
   var $parentDiv=$(this).parent()
})

To target a specific button use eq() method

var thirdButton=$('button[id^="btnHour"]').eq(2);/* indexing is zero based*/

edited Nov 24, 2012 at 20:26

answered Nov 24, 2012 at 20:09

charlietfl

172k14 gold badges125 silver badges154 bronze badges

2 Comments

burakk Over a year ago

I'd like to access the buttons using jQuery just after they are created in the loop. For instance, $("#btnHour4"), how can I craft the jQuery selector using i, or is it not possible?

charlietfl Over a year ago

see update answer on how you can get the button index and matching div. You really don't need incremetal ID's if you use index() , can use common class and find matching div with jQuery eq(index) method also

Collectives™ on Stack Overflow

How to access the programmatically generated elements using jQuery

5 Answers 5

3 Comments

Comments

Comments

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related