jQuery在Rails中执行if-else语句的两个分支

Question

我在Rails页面上有以下jQuery:

$(document).on('click','.reportsArrow', function() {
    if ( $(this).parent().hasClass('reportCollapsed') ) {
      console.log("A");
      $(this).parent().removeClass('reportCollapsed');
    }else{
      $(this).parent().addClass('reportCollapsed');
        console.log("B");
    }
});

当我点击有reportsArrow和没有的元素时reportCollapsed,日志显示

B

A

这意味着它正在执行else零件然后执行if零件.我希望每次单击只执行一次该功能,并且只跟随一个代码路径.为什么要执行两次以及如何阻止它？我应该指出,这在Web设计器创建的模型中正确切换(仅限HTML/CSS/JS).看起来问题是Rails相关.

编辑:

我们找到了一个有效的解决方案

$('.reportsArrow').click(function() {
    $(this).parent().toggleClass('reportCollapsed');
}); 

Answer 1

该事件将被激活一次,并在DOM树中向上传播.使用event.stopPropagation().您也可以使用toggleClass而不是分支.

$(document).on('click','.commonClass', function(event) {
   event.stopPropagation();
   $(this).parent().toggleClass('newClass');
});