jquery - 动态传入 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')
})