添加和删​​除点击/悬停事件处理程序jQuery

Question

遇到混合点击和悬停事件的问题。

单击非活动的li a元素切换活动类并绑定悬停事件。 将鼠标悬停在现在的活动元素上会显示以前隐藏的块（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

enter link description here正确

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

更新here is the link

Answer 2

检查以下演示。

点击事件都被触发，.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
  });