javascript - jQuery on() 方法只能通过 childSelector 间接工作

Question

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

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

有效，但是

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

不是吗？

谢谢，

Answer 1

是事件委托(delegate):

语法是:

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

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

因此在您的情况下，如果 .btn_add 是动态创建的，那么您必须将事件委托(delegate)给最近的静态父级、正文或文档本身。

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

$('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>

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

$('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>