jQuery on()方法绑定动态元素的事件无响应

jquery on() 方法绑定动态元素

jQuery on()方法是官方推荐的绑定事件的一个方法。使用 on() 方法可以给动态创建的元素绑定指定的事件。

<div id="test-demo">
  <button class="btn">按钮1</button>
</div>
<br>
<button class="append">追加元素</button>

$(document).ready(function () {
	// 追加元素方法
    $('.append').on('click', function () {
      $('#test-demo').append('<button class="btn">按钮2</button>')
    })
})

错误的用法
下面方法只为第一个class 为 btn 的button 绑定了click事件，点击追加元素按钮 使用append动态创建的button则没有绑定

// 绑定点击事件
$('#test-demo .btn').on('click', function () {
  alert($(this).text())
})

正确的用法

// 绑定点击事件
$(document).on('click', '#test-demo .btn', function () {
  alert($(this).text())
})