javascript - 在动态元素上无法使用on()处理函数

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

下面的代码模仿了.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>

最佳答案

在body标记上使用事件委托(delegate)，以确保当您将remove/add部分添加到DOM结构时，事件不会被分离:

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

正如 @Taplar 注释所说，如果要委派绑定(bind)的元素是动态创建的，则说明绑定(bind)太低，应绑定(bind)到不是动态body的较高父级。