添加和刪除點擊/懸停事件處理程序jQuery

Question

遇到混合點擊和懸停事件的問題。

單擊非活動li元素切換活動類並綁定懸停事件。 將鼠標懸停在當前活動元素上會顯示一個先前隱藏的塊（span.rate） 單擊隱藏的元素應該隱藏它，移除懸停事件並切換父級上的活動類，使其不再處於「活動」狀態。

單擊懸停事件不會刪除事件並切換活動狀態。還有一些關於互斥選項的邏輯，儘管這一切都很好。這一切是如何坐在一起

的jsfiddle：

http://jsfiddle.net/65yY3/15/

當前JS：

ps = { 

psToggle: 0, 

init: function() { 

    $(document).ready(function() { 

     $('.example li a)').on('click', function(e) { 
      e.preventDefault(); 
      var that = $(this); 
      if (that.parent().hasClass('paired')) { 
       if (rm.psToggle === 0) { 
        that.toggleClass('active'); 
        that.find('.rate').fadeToggle(50); 
        rm.psToggle = 1; 
       } else { 
        if (that.hasClass('active')) { 
         that.toggleClass('active'); 
         that.find('.rate').fadeToggle(50); 
         rm.psToggle = 0; 
        } else { 
         $('.paired a').toggleClass('active'); 
         that.find('.rate').fadeToggle(50); 
         //Call message function 
        } 
       } 
       rm.pControl(); 
      } else { 
       that.toggleClass('active'); 
       that.find('.rate').fadeToggle(50); 
       rm.pControl(); 
      } 
     }); 

    }); 

}, 

pControl: function() { 

    //Unbind events to all control items excluding 1st item. 
    $('.example li a').off('hover'); 
    $('.example li a .rate').off('click'); 

    $('.example .active').each(function(i) { 
     $(this).on('hover', function() { 
      $(this).find('.rate').fadeToggle(50); 
     }); 
    }); 

    $('.example li a.active .rate').on('click', function() { 
     //Remove hover/hide and toggle active state 
     $(this).off('hover'); 
     $(this).hide(); 
     $(this).parent().toggleClass('active'); 
     rm.pControl(); //rebind new active classes 
    }); 

} 

};

ps.init（）;

Answer 1

檢查下面的演示。

這兩個點擊事件都被解僱了，.rate是a的孩子。

$('.example li a.active .rate').on('click'...和

$('.example li a').on('click'...

• 所以，你可以刪除在.rate點擊。 Demo1

• 或者添加e.stopPropagation();給孩子停止從父母到孩子冒泡的事件。 Demo2

  $('.example li a.active .rate').on('click', function(e) { 
      e.stopPropagation(); 
      //Remove hover/hide and toggle active state 
      $(this).off('hover'); 
      $(this).hide(); 
      $(this).parent().toggleClass('active'); 
      ps.pControl(); //rebind new active classes 
  }); 
  

Answer 2

enter link description here正確

$('.example li a') instead of $('.example li a)') 

更新here is the link