javascript - 动态绑定(bind)新行为

Question

我有这个 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!");
  }); 
});

但输出总是:

login clicked!

但是，由于某些原因，HTML更新了但是事件总是调用点击登录。 有人知道我该如何解决它？

Answer 1

您需要使用委托(delegate)事件方法

您正在动态分配 .displayAdvert 类，因此您需要将 .on 方法与动态元素委托(delegate)一起使用:

我想你的故事中有一个静态父级，所以使用它的 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