javascript - 在动态元素上使用 on() 处理程序不起作用

Question

我有一个元素加载到页面上的情况(由某些第三方动态添加)并为该元素定义了特定事件。

下面是模拟相同情况的代码，其中 .on() 没有在我动态添加的元素上工作。

这可能是什么问题？

// 1
$('#bhansa').click(function(){
  console.log('first');
})

// 2
$('.dom').on('click', '#bhansa', function(){
  console.log('second');
})

setTimeout(function(){
  $(".dom").html("<a href='#' id='bhansa'>Click me</a>");
}, 4000);

// 3
$('#bhansa').on('click', function(){
  console.log('last');
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="dom"></div>

Answer 1

在 body 标签上使用事件委托(delegate)，以确保当您向 DOM 结构删除/添加部分时，事件不会被分离:

$('body').on('click', '#bhansa', function(){
     console.log('second');
})

正如 @Taplar 评论所说，如果您要委托(delegate)绑定(bind)的元素是动态创建的，那么您的绑定(bind)太低了，应该绑定(bind)到非动态的更高父级 body.