Невозможно получить доступ к селектору при динамическом прохождении содержимого HTML

Question

У меня есть несколько кнопок на странице, которые реагируют при нажатии. Теперь я передаю этот HTML-контент (содержащий эти кнопки) в пустой div, используя jQuery.

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

#main является пустым DIV и #sectionC является DIV, содержащим эти кнопки. ОК? Все отображается правильно. Все кнопки от #sectionC имеют класс .btn, но следующий сценарий не работает, когда я передаю этот контент динамически.

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

$('.btn').click просто не дозвонились вообще при нажатии на одну из этих кнопок.

Любые мысли?

Answer 1

Используйте jQuery on() для привязки события к динамически добавленным элементам.

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