jQuery是添加類，然後單擊，但在同一時間

我有一個後退按鈕即表現爲點擊使用以下HTMLjQuery是添加類，然後單擊，但在同一時間

<div class="back-from-professors level-one">Back</div>

我用下面的jQuery的申請一回行動

jQuery('.research-box-container').on('click', '.back-from-professors.level-one', function() { 
    jQuery('.professor').removeClass('show'); 
    jQuery('.professor-list').hide(); 
    jQuery('.research-box-inner-sections-container').show(); 
    jQuery('.capability-list').removeClass('temporary-hide'); 
});

然後我想申請以下時

jQuery('.professor-list').on('click','.professor.show', function() { 

    jQuery(this).parent().find('.back-from-professors').addClass('level-two'); 
    jQuery(this).parent().find('.back-from-professors').removeClass('level-one');  
    jQuery(this).next().addClass('show'); 
    jQuery(this).removeClass('show'); 

}); 

jQuery('.professor-list').on('click','.back-from-professors.level-two', function() { 

    jQuery(this).parent().find('.grey-list-item.professor').addClass('show'); 
    jQuery(this).parent().find('.grey-list-professor-details').removeClass('show'); 
    jQuery(this).removeClass('level-two'); 
    alert('test'); 
    jQuery(this).addClass('level-one');  

});

然而，當我點擊.back-from-professors.level-two它做如預期，然後提醒test。然後，它會將類level-one但隨後也執行從我的第一個jQuery代碼的動作上面，即它適用的jQuery('.research-box-container').on('click', '.back-from-professors.level-one', function() {});

行爲難道這與.on()發生？

我能在這裏重現問題... http://jsfiddle.net/tb8uLpnL/4/（更新的jsfiddle）

來源

2015-10-16 Adrian

是.back從 - professors.level兩內.back從 - professors.level 211？可能會傳播起來。請嘗試內部的stopProgation。從教授級回到二級。 – BenG

不，他們是相同的元素，所以我不明白爲什麼會發生。它的不尋常，因爲它完全按照預期完成，直到'alert（'test'）'後，然後，而不僅僅是簡單地添加類，它似乎在我的第一個jQuery功能中做了所有事情 – Adrian

我添加了'event。 stopPropagation（）;'在'jQuery（this）.addClass（'level-1'）之後'''但是沒有運氣 – Adrian

你的問題是.professor-list裏面.research-box-container。所以當你點擊back，它冒泡到你趕上與連接到.professor-list事件： -

jQuery('.professor-list').on('click','.back-from-professors.level-two', function() {

您再添加.level-one了。然後，當它再次冒泡到下一個元素.research-box-container事件附

jQuery('.research-box-container').on('click', '.back-from-professors.level-one', function() {

找到與類.level-one內的元素。

最簡單的解決方法是雙方太重視.research-box-container。

所以： -

jQuery('.research-box-container').on('click', '.back-from-professors.level-one', function() { 

jQuery('.research-box-container').on('click','.back-from-professors.level-two', function() {

來源

2015-10-17 18:42:17 BenG

哇完美，謝謝！快速的問題，即使問題得到解決，我仍然不完全明白爲什麼它決定觸發'jQuery（'。research-box-container'）。on（'click'，'.back-from-professors.level-one' ，function（）'添加後，我明白，因爲'.professor-list'在'.research-box-container'裏面，點擊其中的兩個，但我會認爲'.back-from- professors.level-one'仍然難道不「存在」，但如果你得到了我！ – Adrian

我的意思是存在特定的點擊 – Adrian

點擊是來自元素向上傳播。所以，當其在.professor列表添加.LEVEL-之一。然後事件移動到.research-box-container。現在它找到.level-one。 – BenG

jQuery是添加類，然後單擊，但在同一時間

回答

相關問題