Question

我有这个标记：

<div class="list-group-item participant-main">
   <i class="fa fa-chevron-down" id="chevron-for-div" aria-hidden="true"></i>
   <div class="row">
      <div class="col-sm-8">
         <h5 class="list-group-item-heading">A title</h5>
      </div>
      <div class="col-sm-4 list-group-item-quick-links ">
        <a href="#" />
        <a href="#" />
      </div>
   </div>
</div>

<div class='list-group-item hidden-group-item hide'>
   <div class="row">
      <div class="col-sm-8">
         <p class="list-group-item-text">
            Some text
         </p>
      </div>
      <div class="col-sm-4">
         <p class="list-group-item-text">
            More text
         </p>
      </div>
   </div>
</div>

以前，当我通过此代码点击.hidden-group-item时，我正在使用Jquery取消隐藏/隐藏.participant-main：

$('body').on('click', '.member-main, .participant-main', function() {
  if ($(this).next('.hidden-group-item').hasClass('hide')) {
     $('.hidden-group-item').addClass('hide');
     $(this).next('.hidden-group-item').toggleClass('hide');
  }
  else {
     $(this).next('.hidden-group-item').toggleClass('hide');
  }
  $('.hidden-form-item').addClass('hide');
});

我正在添加一些指向.participant-main的链接，因此我无法将click事件绑定到整个div，因此新链接可以并行工作。我已经尝试将click事件绑定到div中的特定元素，因此我将目标类移动到这样的特定元素。

<div class="list-group-item">
   <i class="fa fa-chevron-down participant-main" id="chevron-for-div" aria-hidden="true"></i>
   <div class="row">
      <div class="col-sm-8 participant-main">
         <h5 class="list-group-item-heading">A title</h5>
      </div>
      <div class="col-sm-4 list-group-item-quick-links ">
        <a href="#" />
        <a href="#" />
      </div>
   </div>
</div>

我希望它会起作用，但事实并非如此。

我不明白为什么会发生这种情况以及如何解决。据我所知.next（）抓取与指定选择器匹配的下一个元素。

Answer 1

由于您已嵌套元素，因此应使用stopPropagation()来阻止事件冒泡：

$('body').on('click', '.member-main, .participant-main', function(e) {
    e.stopPropagation();

    ...
});

希望这有帮助。

当更改事件有界的对象时，JQuery的.next（）似乎不起作用

1 个答案: