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');
});

Answer 2

不知道为什么，但我在不引人注目的javascript中的日子已经教会我尽可能地具体和最不模糊。

从不担心为什么，只要它有效。被问到为什么（就在这里），我的答案是＆＃34;我将不得不查阅＆＃34;。遗憾。

因此，我会避免在THE文档上设置catch方法然后过滤操作：我会直接将事件捕获指向我想要观察的元素（或元素集）。

所以，而不是使用：

$(document).on('click','.reportsArrow', function() {
    //...
});

我会直截了当地说：

$('.reportsArrow').click(function () {
    //..
});

在阅读了jQuery .on()的API文档之后，在我看来，它可能更适合使用.one()，因此在命中之后没有延续＆＃34;＃1＆＃ 34 ;.但我没有测试过，所以我无法肯定地说。

Answer 3

您需要停止事件传播到子元素。否则您可以使用toggleClass：

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

Answer 4

试试这个，

您需要避免事件冒泡DOM树。必须有父母导致事件发生两次或更多次。为避免这种情况，请使用event.stopPropagation()

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

});

Answer 5

我无法重现你的问题。您的代码在我的Firefox上在一个简单的HTML页面上运行良好。

请尝试这段代码并返回控制台输出：

function onClick(ev) {
  console.log(ev.currentTarget, '\n', ev.target, '\n', ev);
  if(ev.target === ev.currentTarget)
    console.log($(this).parent().toggleClass('newClass').hasClass('newClass') ? 'B' : 'A');
};

编辑：当然还有：

$(document).on('click', '.commonClass', onClick);

Answer 6

为了便于阅读，请使用像这样的:not将逻辑放入jQuery选择器

$(document).on('click','.reportCollapsed > .reportsArrow', function() {
  $(this).parent().removeClass('reportCollapsed')
  console.log("A");
})

$(document).on('click','not:(.reportCollapsed) > .reportsArrow', function() {
  $(this).parent().addClass('reportCollapsed')
  console.log("B");
})

Answer 7

鉴于这种方法有效（点击＆gt; else＆gt; B），是否可以侦听DOMSubtreeModified或其他DOMChange事件，这些事件会再次触发对文档的点击？

您是否尝试过点击后调试/跟听电话？ Afaik chrome有一个很好的gui来做到这一点。

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

7 个答案: