Question

I have some buttons on a page which respond upon being clicked. I am now passing this HTML content (containing these buttons) into an empty div using jQuery.

$('#main').html($('#sectionC').html())

#main is the empty div and #sectionC is the div containing these buttons. Ok?
Everything displays properly. All of the buttons coming from #sectionC have a class of .btn, but the following script doesn’t work when I pass this content in dynamically.

$('.btn').click( function() {
  $(this).toggleClass('btn-active')
})

$('.btn').click simply doesn’t get called at all when clicking on one of these buttons.

Any thoughts?

Answer 1

Use jQuery on() for binding event on dynamically added elements.

$('#main').on('click', '.btn', function() {
  $(this).toggleClass('btn-active')
})