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>