On Click on Buttons when created on the fly

Question

I have two button classes, when clicked, I want something to happen.

I have:

$('.btn-comment, .btn-youtube').click(function(){

This used to work when the buttons were static. They are now created ad hoc.

I have tried this:

$('.btn-comment, .btn-youtube').on('click', function(){

But no luck.

You need to bind events, or delegate events, to ancestor elements that exist in the DOM at the point of binding. — David says reinstate Monica, Sep 23 '13 at 11:46
Do they have the same id as it in `$('.btn-comment, .btn-youtube').on('click', function(){`? — hima, Sep 23 '13 at 11:48
Does this answer your question? [Event binding on dynamically created elements?](https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements) — user4157124, May 12 '20 at 22:43

Alvaro · Answer 1 · 2013-09-23T11:48:18.820

1

That's not how it works. You should add the delegation to the parent element. The one who is going to suffer from modification.

You can do it with the whole document:

$(document).on('click', '.btn-comment, .btn-youtube', function(){ ... });

But it would be better to do it with the modified element.

edited Sep 23 '13 at 11:48

answered Sep 23 '13 at 11:45

Alvaro

37,936
23
138
304

1

Stack Overflow needs a *sticky* in each tag. jQuery Event Delegation should be it. – CodingIntrigue Sep 23 '13 at 11:46
@RGraham what do you mean? – Alvaro Sep 23 '13 at 11:48
It's just it's such a frequently asked question, there should be a big warning label when you add a jQuery tag to a question saying "Use the following syntax to make sure your events always fire" :) – CodingIntrigue Sep 23 '13 at 11:49

Alnitak · Accepted Answer · 2013-09-23T11:52:58.550

1

You need to register the handler on a common static ancestor (worst case document, but the nearer the better) and then use the new .on syntax for delegated handlers, e.g.:

$(document).on('click', '.btn-comment, .btn-youtube', function() { 
     ...
});

edited Sep 23 '13 at 11:52

answered Sep 23 '13 at 11:46

Alnitak

313,276
69
379
466

So if they are in a list it would be better to do: $('#myList').on('click', '.btn-comment, .btn-youtube', function(){ – panthro Sep 23 '13 at 11:52
1

@panthro indeed, unless the list element itself is also dynamically replaced. The common ancestor must be _static_. – Alnitak Sep 23 '13 at 11:52

Ben Jackson · Answer 3 · 2013-09-23T11:53:01.297

Check out the jQuery docs for .on(). You need to use:

$('body').on('click', '.btn-comment, .btn-youtube', function(){ ... });

The problem with your code is that if .btn-comment, .btn-youtube are being inserted dynamically, then they probably don't exist at the point at which you're trying to attach your event handlers. The above line of code attaches the handler to body but is only triggered by elements matching the second argument ('.btn-comment, .btn-youtube').

And ideally, you'd replace 'body' with the closest ancestor that the new elements are being inserted into.

On Click on Buttons when created on the fly

3 Answers3