时间戳

首页 > 解决方案 > jQuery点击动态添加的类

javascript - jQuery点击动态添加的类

问题描述

我想在第一次单击时向按钮添加一个类，当再次单击新添加的类时，它应该做一些事情（例如显示警报）。

我正在尝试这个，但这会在第一次点击时显示警报，即使该类最初不存在。

HTML：

<div id="banner-message">
  <p>On first click, add .added class to the button</p>
   <p>On clicking .added, show alert</p>
  <button>Click</button>
</div>

jQuery

$('button').on('click', function(e){
    e.preventDefault();  
  $(this).addClass("added");
})

$(document).on('click', '.added', function(e){
    e.preventDefault();  
  alert("Clicked on .added");
})

JSFiddle： https ://jsfiddle.net/n837rw5h/

标签： javascriptjquery

解决方案

问题是click正在传播到委托的点击处理程序，当点击到达委托的处理程序时，按钮已经有了类，所以委托的处理程序会触发。

只需将点击传播置于顶部，因此它不会到达委托处理程序，而是return false在最后添加或添加e.stopPropagation()到您的第一个 click` 处理程序。如果按钮已经具有类，则不需要这样做，这样您就不会阻止委托处理程序在它已经具有类时触发：

$('button').on('click', function(e){
  var $this = $(this);
  if (!$this.hasClass("added")) {
      $this.addClass("added");
      return false;
  }
});

现场示例：

$('button').on('click', function(e){
  var $this = $(this);
  if (!$this.hasClass("added")) {
      $this.addClass("added");
      return false;
  }
});

$(document).on('click', '.added', function(e){
    e.preventDefault();  
  alert("Clicked on .added");
})
<div id="banner-message">
  <p>On first click, add .added class to the button</p>
   <p>On clicking .added, show alert</p>
  <button>Click</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

在该示例中，我return false;在末尾添加（并删除e.preventDefault()），因为return falsejQuery 单击处理程序既可以防止默认值，也可以停止传播。

另一种方法是使用两个委托处理程序：一个用于当它没有类时，另一个用于当它有类时：

$(document).on('click', '.foo:not(.added)', function(e){
  e.preventDefault();  
  $(this).addClass("added");
});

$(document).on('click', '.added', function(e){
  e.preventDefault();  
  alert("Clicked on .added");
})
<div id="banner-message">
  <p>On first click, add .added class to the button</p>
   <p>On clicking .added, show alert</p>
  <button class="foo">Click</button>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

注意我向按钮添加了一个类，以便我可以为第一个委托处理程序识别它。

推荐阅读