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标记上使用事件委托，以确保当您remove/add成为DOM结构的一部分时，事件不会被分离：

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

如 @Taplar 注释所述，如果要动态委派要委派绑定的元素，则说明绑定太低，应绑定到非动态的较高父级body

Answer 2

问题在于，如果您删除dom组件，那么所有侦听器也会被删除。
尝试以这种方式添加侦听器：

$("body").on("click", "#bhansa", () => {console.log(123)})

Answer 3

您也可以这样写：-

$(document).find().on('click', '#bhansa', function(){
    //code
});

这里的文档是Dom对象。

在动态元素上无法使用on（）处理函数

3 个答案: