javascript - jQuery 点击动态添加的类

Question

我想在第一次单击时向按钮添加一个类，当再次单击新添加的类时，它应该执行某些操作(例如显示警报)。

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

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/

Answer 1

问题在于，点击正在传播到委托(delegate)点击处理程序，当点击到达委托(delegate)处理程序时，按钮已经具有该类，因此委托(delegate)处理程序将被触发。

只需在点击传播顶部，这样它就不会到达委托(delegate)处理程序，但在末尾添加 return false 或在第一个中添加 e.stopPropagation()单击`处理程序。如果按钮已经具有该类，则您需要不这样做，这样就不会阻止委托(delegate)处理程序在已经具有该类时触发:

$('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 false jQuery 单击处理程序之外的内容都可以防止默认情况并停止传播。

另一种方法是使用两个委托(delegate)处理程序:一个用于没有该类时，另一个用于有该类时:

$(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>

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