jQuery 点击动态添加 class

Question

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

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

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

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

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

$('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() ），因为从 jQuery 点击处理程序中return false既可以防止默认值，也可以停止传播。

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

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

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

Answer 2

添加检查以查看元素是否具有 class。

// handle click and add class
    $('button').on('click', function(e){
        e.preventDefault();
      if($(this).hasClass("added")) {
        alert("Clicked on .added");
      } else {
        $(this).addClass("added");
      }
    })