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

Answer 2

不知道為什么，但我在不引人注目的javascript中的日子已經教會我盡可能具體和盡可能模糊。

只要有效，就不要擔心為什么。 被問到為什么（就在這里），我的答案是“我將不得不查找”。 抱歉。

因此，我會避免在THE文檔上設置catch方法然后過濾操作：我會直接將事件捕獲指向我想要觀察的元素（或元素集）。

所以，而不是使用：

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

我會直截了當地說：

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

在閱讀了jQuery .on()的API文檔之后，在我看來，它可能更適合使用.one() ，因此在命中“＃1”后沒有延續。 但我沒有測試過，所以我不能肯定地說。

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

為了便於閱讀，請使用以下命令將邏輯放入jQuery選擇器:not這樣的

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

鑒於這有效一次（點擊> else> B）可能是某些東西偵聽DOMSubtreeModified或其他DOMChange事件再次觸發對文檔的點擊？

您是否嘗試過點擊后調試/跟聽電話？ Afaik chrome有一個很好的gui來做到這一點。