Jquery/Javascript: Buttons added dynamically with javascript do not work

Question

I have a code chunk of html:

<div id="chunk-1" class="chunk">  
    <div class="chunkText">Text<div>  
    <button class="addChunk">Click Me</button>  
</div>

<script>

$(".addChunk").click(function(){create_chunk(this.parentNode)})

function create_chunk(after_this){
    $(after_this).after(chunk_html)
    var i = 0
    $("div.chunk").each(function(){$(this).attr('id', "chunk-" + i++)})
    }

</script>

Now, this works, but only for the .chunk that is statically rendered on the page. When I press the button a second chunk appears, but that button does not work. If I add the html for two or more chunks to be rendered, each one works, but the buttons for the chunks it creates do not. What should I do?

A word of warning about (almost) all of the answers below on this old question: please see jquery's live() is deprecated. What do I use now? -- use .on or .delegate, not .live. — apsillers
– apsillers, Commented Sep 11, 2014 at 16:53

Elangovan · Accepted Answer · 2010-05-25 16:00:26Z

3

The event handler in the below line attaches the click event to the element matching the selector when you add the handler.

$(".addChunk").click(function(){create_chunk(this.parentNode)})

you can use the live handler to do this. the following code will solve your problem

$(".addChunk").live('click'. function(){create_chunk(this.parentNode)});

answered May 25, 2010 at 16:00

Elangovan

1,4643 gold badges23 silver badges41 bronze badges

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

2 Comments

Nick Craver Over a year ago

@jAndy - The question says another chunk is added...so what would you delegate on? #chunk-1 doesn't work here, you need a higher ancestor.

jAndy Over a year ago

Ohh well, for some reason I just assumed OP wants to duplicate an item within the div.

Jerod Venema · Accepted Answer · 2010-05-25 15:56:25Z

2

Use the "live" jQuery function.

$(".addChunk").live('click'. function(){create_chunk(this.parentNode)});

The problem is that you're binding to a single element. The "live" option will monitor the document for any clicks on elements that have the ".addChunk" class.

answered May 25, 2010 at 15:56

Jerod Venema

44.7k5 gold badges70 silver badges109 bronze badges

Comments

jAndy · Accepted Answer · 2010-05-25 15:56:35Z

2

replace

.bind()

with

.live()

or even better use

.delegate()

which is in your case:

$('#chunk-1').delegate('.addChunk', 'click', function(){create_chunk(this.parentNode);})

furthermore, go to www.jquery.com and read the documentation.

answered May 25, 2010 at 15:56

jAndy

237k57 gold badges313 silver badges363 bronze badges

Collectives™ on Stack Overflow

Jquery/Javascript: Buttons added dynamically with javascript do not work

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

2 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related