jQuery on() 方法只能通过 childSelector 间接起作用

Question

任何想法可能是代码的原因

$('body').on('click', '.btn_add', function(e) {alert("test");});

有效，但是

$('.btn_add').on('click', function(e) {alert("test");});

没有？

谢谢，

Answer 1

是事件委托：

语法是：

$(staticparent).on(event, selector, fn);

在此语法中 selector 不是 DOM 的一部分，这意味着当您的页面加载时此元素不在 dom 中但在一些 js 代码执行后.btn_add 元素添加到 DOM。因此不会为该元素注册页面加载时绑定的任何事件。

所以在你的情况下，如果 .btn_add 是动态创建的，那么你必须将事件委托给最近的静态父对象、正文或文档本身。

这里是未绑定动态内容事件的测试用例。

$('button').on('click', function() {
  $('<button/>', {
    text: "Dynamic button"
  }).appendTo('body');
  alert(this.textContent);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Static</button>

这是事件绑定到动态内容的测试用例。

$('body').on('click', 'button', function() {
  $('<button/>', {
    text: "Dynamic button"
  }).appendTo('body');
  alert(this.textContent);

})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button>Static</button>

jQuery on() method only works indirectly via childSelector