Question

So I have a jquery function that does something when class ‘ajaxsubnote’ is clicked

$('.ajaxsubnote').click(function(){
     //do something....
})

But the user can add elements with class ‘ajaxsubnote’ dynamically via jquery. My problem is these dynamically added elements, when clicked, don’t seem to call the above function, whereas the ones originally on the DOM do…

Any way around this?

Answer 1

You should use delegated event method to handle dynamic elements. See below,

// v--- replace document with closest parent container that exist in DOM
$(document).on('click', '.ajaxsubnote', function(){
     //do something....
})

For older versions use delegate,

// v--- replace document with closest parent container that exist in DOM
$(document).delegate('.ajaxsubnote', 'click', function(){
     //do something....
})