动态传递HTML内容时无法访问选择器

Question

我在页面上有一些按钮，点击后会响应。我现在使用jQuery将这个HTML内容（包含这些按钮）传递给一个空div。

$('#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')
})