Question

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

然后我添加了另一个函数，该函数将该元素添加到该类中。

然而它不起作用，就好像它没有计算在前一个函数中添加的类的数量。

以下是我的代码：

$(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具有活动类时，触发警报。

不工作吗。

Answer 1

将第二个函数嵌套在第一个函数中，因为第二个函数取决于第一个函数的完成。在分开时，它们被评估为单独的函数，因此当时.content.active尚不存在。

演示

＆＃13;

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

＆＃13;

.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
}

＆＃13;

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

＆＃13;

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

1 个答案:

演示