添加和删​​除click / hover事件处理程序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

在此处输入链接描述正确

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

在这里更新是链接

Answer 2

查看以下演示。

无论是点击事件被炒鱿鱼的， .rate是孩子a 。

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

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

• 因此，您可以删除对.rate的单击。 演示1

• 或添加e.stopPropagation(); 给孩子停止事件从父母到孩子的冒泡。 演示2

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