OnClick JS does NOT work with new elements in DOM?

Question

So here is a question.

I have HTML

<a class="callback">Callback</a>

I have external Jquery-file (with Bootstrap.js included)

$(".callback").on('click', function() {
var myModal = '<div><a id="callback"></div>';
$(myModal).modal('show');
});
$("#callback").on('click', function() {
//some actions
});

So ".callback"-event works fine because that link we have in the current DOM. But "#callback"-event does NOT work. Maybe cos of that element appears after JS-file has loaded (seriously?).

Please, could anyone answer why "#callback"-event does NOT work?

Thanks a lot!

score 0 · Accepted Answer · answered Jul 23 '14 at 13:28

0

You need to use jQuery's event delegation syntax for on() when binding to dynamically created elements:

$(document).on('click', "#callback", function() {

answered Jul 23 '14 at 13:28

j08691

204,283
31
260
272

what if I will use $(".callback").click( function() {... ? – Kamil Davudov Jul 23 '14 at 13:35
If you mean an class instead of an ID, the syntax is the same. `$(document).on('click', ".callback", function() {`. You need to bind to an element that exists when the page is loaded either way. – j08691 Jul 23 '14 at 13:37
Sorry, I mean if I use right CLICK not ON. – Kamil Davudov Jul 23 '14 at 13:40
You pass the event to on, whatever event you're using. You have to use on over click when binding to dynamic elements. – j08691 Jul 23 '14 at 13:44

OnClick JS does NOT work with new elements in DOM?

1 Answers1