动态绑定新行为

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!");
  }); 
});

但产出总是：

登录点击！

但是，由于某种原因，HTML被更新了，但是事件总是调用单击登录。有人知道我怎么解决这个问题吗？

Answer 1

使用事件委托，因为您动态地添加了一个类：

$(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!");
  }); 
});

演示

Answer 2

您需要使用-一个委托-事件接近

您正在动态地分配.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

Answer 3

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

$(document).on("click", ".displayAdvert", function() {
    console.log("display was clicked");
});