时间戳

首页 > 解决方案 > 通过单击添加类并捕获添加的类

javascript - 通过单击添加类并捕获添加的类

问题描述

页面加载完成后，我可以用 jquery 添加一个类，如下所示。

$(document).ready(function() {
    $("#parent").click(function(){
        $(".child").addClass("active");
    });
});

但我无法点击添加的类，它不起作用。

$(".child.active").click(function(){
    alert('this is clicked');
});

你能帮帮我吗？

标签： javascriptjquery

解决方案

由于.activeDOM 加载时孩子不在.child.active，因此不会选择任何元素，因此不会添加孩子的事件处理程序。而是将处理程序添加到.child单独的处理程序中，并在处理程序内部检查它是否处于活动状态：

$(document).ready(function() {
  $("#parent").click(function() {
    $(".child").addClass("active");
  });
});

$('.child').on('click', function() {
  if ($(this).is('.active')) {
    console.log('this is clicked');
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  parent
  <div class="child">
    child
  </div>
</div>

或者在父点击处理程序中添加监听器：

$(document).ready(function() {
  $("#parent").click(function() {
    $(".child")
      .addClass("active")
      .off('click')
      .on('click', function() {
        if ($(this).is('.active')) {
          console.log('this is clicked');
        }
      });
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="parent">
  parent
  <div class="child">
    child
  </div>
</div>

推荐阅读