添加类后的jquery触发事件不起作用答案

【问题标题】：jquery trigger event after adding a class is not working添加类后的jquery触发事件不起作用
【发布时间】：2018-04-10 09:16:34
【问题描述】：

这是我的情况，点击一个按钮，一个事件正在发生，一个类被添加到该元素。

然后我添加另一个函数，该函数将添加该类的元素计数。

但是它不起作用，就像它没有计算在前一个函数中添加的类一样。

下面是我的代码：

$(document).on('click', "ul.nav-responsive li:last-child", function() {
  var width_canvas = $('.top-bar-right ul li.medium-3.small-4').outerWidth();
  console.log(width_canvas)
  var dwidth = $(window).width() - width_canvas;
  $('.off-canvas-content').addClass('active');
  $('.position-right').css('width', dwidth);
  $('.off-canvas-content').css('transform', 'translatex(-' + dwidth + 'px)');
});


$(document).on('click', ".off-canvas-content.active", function() {
  alert('test')

  var width_canvas = $('.top-bar-right ul li.medium-3.small-4').outerWidth();
  console.log(width_canvas)
  var dwidth = $(window).width() - width_canvas;

  $('.off-canvas-content.is-open-right').css('transform', 'translatex(0px)');
});

在第一个函数中，我向 .off-canvas-content 添加了一个活动类在第二个函数 id 上，例如当 off-canvas-content 具有活动类时，触发警报。

它不工作吗？

【问题讨论】：

连续点击 2 次是否有效？它可能无法按原样单击运行，因为当第一次单击完成时，仍然没有找到active 类。
你能分享小提琴/codepen吗？
请发minimal reproducible example 并附上HTML。

标签： javascript jquery

【解决方案1】：

将第二个函数嵌套在第一个函数中，因为第二个函数依赖于第一个函数的完成。分开时，它们会作为单独的函数进行评估，因此当时 .content.active 还不存在。

演示

$("ul.nav li:last-child").on('click', function() {
  $('.content').addClass('active');
  $(".content.active").on('click', function() {
    $(this).text('WorX!');
  });
});

.content {
  width: 60px;
  height: 20px;
  background: red;
  margin-left: 30%;
  color: white
}

.content.active {
  background: blue;
  transform: scale(5);
  font-size: 18px;
  color: gold;
  margin-top:20%
}

li {
  cursor: pointer
}

<ul class='nav'>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ul>

<div class='content'>Content</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

【讨论】：