动态绑定新行为

Bind a new behavior dynamically

本文关键字：新行 动态绑定      更新时间：2023-09-26

我有这个HTML:

<div class="bold knowmore login" id="j-6">
<span>...</span>
</div>

和这个jQuery:

$(function(){
  $(".login").on("click", function(){ 
     console.log('login clicked!');
     $(".bold.knowmore").removeClass("login").addClass("displayAdvert");
  });
  $(".displayAdvert").on("click",function(){
    console.log("display was clicked!");
  }); 
});

但是输出总是:

登录点击!

但是，由于某种原因，HTML被更新了，但是事件总是调用click login。有人知道我该怎么解决吗?

您需要使用一个委托事件方法

你动态地分配.displayAdvert类，所以你需要使用。on方法与动态元素委托:

我假设你的故事中有一个静态父元素，所以使用它的ID:

$(function(){
  $(".login").on("click", function(){ 
     console.log('login clicked!');
     $(".bold.knowmore").removeClass("login").addClass("displayAdvert");
  });
  $("#parent").on("click", ".displayAdvert", function(){
    console.log("display was clicked!");
  }); 
});

http://api.jquery.com/on/direct-and-delegated-events

使用事件委托，因为您正在动态添加一个类:

$(function(){
  $(document).on("click",".login", function(e){ 
      e.preventDefault();
     console.log('login clicked!');       $(".bold.knowmore").removeClass("login").addClass("displayAdvert");
  });
  $(document).on("click", '.displayAdvert',function(e){
      e.preventDefault();
    console.log("display was clicked!");
  }); 
});
演示

对于动态创建的元素，您可以使用如下内容:

$(document).on("click", ".displayAdvert", function() {
    console.log("display was clicked");
});
相关文章：