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标签上使用事件委托,以确保在删除/添加部件到DOM结构时不会分离事件：

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

正如@Taplar评论所说,如果您委托绑定的元素是动态创建的,那么绑定太低并且应该绑定在不是动态主体的更高父级上.