CODEWITHSUNDEEP
jqueryclick
David King
David King

Reputation: 2040

JQuery access dynamically created objects

How can I acceess objects(divs) that were dynamically generated. I mean DIVS that were not present in output when $(document).ready(function() started.

If I do:

$('#click_me').click(function() {
    $('#container').append('<div id="clicker2">can you click on me?</div>');
});

$('#clicker2').click(function() {
    alert('hurray, it works');
});

the clicker2 won't work

How can I fix it? I'm intent to create more than one dynamically. and I want to assign Jquery actions to themt too.

Upvotes: 0

Views: 1169

Answers (3)

halocursed
halocursed

Reputation: 2485

.click() functions that aren't working on spans or divs that are added later, you'll need to use .live()

$("#clicker2").live("click", function(){
  # do stuff to spans currently existing
  # and those that will exist in the future
});

Upvotes: 3

Steerpike
Steerpike

Reputation: 17544

Create the div explicity and assemble its attributes and events before you append it.

var $div = $('<div />').append('can you click on me?').attr('id', 'clicker2').click(function() {
alert('hurray, it works');
});
$('#container').append($div);

Upvotes: 1

MaLKaV_eS
MaLKaV_eS

Reputation: 1325

Just put the click binding inside the first click function:

$('#click_me').click(function() 
{
    $('#container').append('<div id="clicker2">can you click on me?</div>');
    $('#clicker2').click(function(){  alert('hurray, it works');   });
});

As you have it, the binding is being called, but there is no "div#clicker2" to bind to the second function.

Hope this helps.

Upvotes: 0

Related Questions