javascript - Adding and removing click/hover event handlers jQuery -

javascript - Adding and removing click/hover event handlers jQuery -

run issues mixing click , hover events.

clicking inactive li element toggles active class , binds hover event. hovering on active element displays hidden block (span.rate) clicking hovered element supposed hide it, remove hover event , toggle active class on parent no longer 'active'.

clicking hovered event not remove events , toggle active. there other logic in there regarding mutually exclusive options, works fine though.

jsfiddle of how sits together:

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

current js:

ps = { pstoggle: 0, init: function () { $(document).ready(function () { $('.example li a)').on('click', function(e) { e.preventdefault(); var = $(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 command items excluding 1st item. $('.example li a').off('hover'); $('.example li .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 , toggle active state $(this).off('hover'); $(this).hide(); $(this).parent().toggleclass('active'); rm.pcontrol(); //rebind new active classes }); }

};

ps.init();

check below demos.

both click events getting fired ,.rate kid of a.

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

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

so can either remove click on .rate. demo1

or add together e.stoppropagation(); kid stop event bubbling parent child. demo2

$('.example li a.active .rate').on('click', function(e) { e.stoppropagation(); //remove hover/hide , toggle active state $(this).off('hover'); $(this).hide(); $(this).parent().toggleclass('active'); ps.pcontrol(); //rebind new active classes });

javascript jquery html css event-handling