Adding and removing click/hover event handlers jQuery - javascript

Run into issues mixing click and hover events.
Clicking an inactive li a element toggles an active class and binds a hover event.
Hovering over now active element displays a previously hidden block (span.rate)
Clicking the hovered element is supposed to hide it, remove hover event and toggle the active class on the parent so it is no longer 'active'.
Clicking the hovered event does not remove the events and toggle active. There is some other logic in there regarding mutually exclusive options, this all works fine though.
jsfiddle of how it all 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 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();

Check the below demos.
Both the click events were getting fired as ,.rate is the child of a.
$('.example li a.active .rate').on('click'... and
$('.example li a').on('click'...
So you can either remove the click on .rate. Demo1
Or add e.stopPropagation(); to the child to stop event bubbling from parent to child. 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
});

enter link description hereCorrect
$('.example li a') instead of $('.example li a)')
update here is the link

Related

Toggle only when parent list items is clicked

I have a simple ol li based list which toggles when i click on parent item or child item. I want it to toggle only when parent item is clicked.
$("#expList > li").click(function () {
$(this).find("ol").slideToggle();
});
https://jsfiddle.net/k2jqqbbk/3/
I tried to target it with $("#expList ol li") but this is not working. I tried few other options which didn't work either.
You could use the event.target to check whether its closest li contains an ol, and only toggle if it does:
$('#expList > li').click(function(evt) {
if ($(evt.target).closest('li').has('ol').length) {
$(this).find("ol").slideToggle();
}
});
Here's a fiddle
You need to target the a tag. Because the ol is the next child, the find call has been replaced with a call to next:
$("#expList > li > a").click(function () {
$(this).next().slideToggle();
});
If you want the functionality to extend to children of children, just omit #expList from the selector:
$("li > a").click(function () {
$(this).next().slideToggle();
});
Fiddle
Try to add the following code :
$("#expList > li").click(function () {
$(this).find("ol").slideToggle();
});
$("#expList > li ol li").click(function () {
return false;
});
The click event bubbles up to ancestor elements. So the click is fired first against the second-level list items, then bubbles up to the first-level list items. This is why you're seeing the toggling happen.
All you need to do is stop the click event bubbling up the element chain from the second-level list items.
Add this to fix:
$("#expList ol li").click(function(e) {
e.stopPropagation();
});
Here's the example: https://jsfiddle.net/sxn5bg3x/

dropdown menu , remove class if its open

I'm trying to create dropdown menu, I'm doing it in this way, by default on dropdown menu I'm doing
.dropdown {
display: none;
}
then im creating event on click and based on that context im toggling class
.active { display block; }
now I cant figure out how can I remove that .active class when I click on other button or in document, I don't want to keep dropdown active class if user click on other button demo
http://jsfiddle.net/pnLkpxkb/8/
$(function () {
// The user clicks anywhere in the document
$(document).click(function (e) {
// If a dropdown has a class active AND if the dropdown or the link is not the target of the click
if ($("ul.dropdown").hasClass("active") && !$("ul.dropdown, .btn > a").is(e.target)) {
// Remove class active
$("ul.dropdown.active").removeClass("active");
}
});
var dropdown = $(".btn > a");
// The user clicks on a toggle link (One or Two)
dropdown.on("click", function () {
// Remove the active class from the active element
$("ul.dropdown.active").removeClass("active");
// Add class to the relevant sub menu
$(this).siblings("ul.dropdown").addClass("active");
});
}());
Updated after comment
You don't need to put "" with this keyword. Your code line should be:
$(this).siblings("ul.dropdown").toggleClass("active");
Complete Code
$(function () {
var dropdown = $(".btn").find("a");
dropdown.on("click", function() {
$("ul.dropdown.active").removeClass("active"); //added new line
$(this).siblings("ul.dropdown").toggleClass("active");
});
}());
Updated Code with Remove Class
toggleClass don't work as you want. For your case i suggest to go this way:
$(function () {
var dropdown = $(".btn").find("a");
dropdown.on("click", function() {
$("ul.dropdown").removeClass("active");//add this to remove class from all ul .dropdowns
$(this).siblings("ul.dropdown").addClass("active");//Add class to your ul dropdown. Here you can use toggleClass too
});
}());
fiddle
$(function () {
$(document).on('click', function () {
$("ul.dropdown").removeClass('active');
});
$(".btn a").on("click", function (e) {
e.stopPropagation();
$("ul.dropdown").removeClass('active');
$(this).siblings("ul.dropdown").addClass("active");
});
});
JSFiddle Demo.

jQuery: Clicking anywhere to remove class, without using $('body').on('click'

I want to remove all active classes when clicking anywhere on the screen, but if a clicked element has the .dropdown class, I would also want to toggle the .active class into that element.
// remove all .active classes when clicked anywhere
hide = true;
$('body').on("click", function () {
if (hide) $('.dropdown').removeClass('active');
hide = true;
});
// add and remove .active
$('body').on('click', '.dropdown', function () {
var self = $(this);
if (self.hasClass('active')) {
$('.dropdown').removeClass('active');
return false;
}
$('.dropdown').removeClass('active');
self.toggleClass('active');
hide = false;
});
I have this working with the above but I'm worried capturing a body click is overkill, and unnecessary. Is there a better solution?
jsiddle - I've set several li's to the .active class, if you click around you will see they get removed. Clicking an li will trigger toggleClass('active'), whilst still removing all .active classes.
you could try doing:
$('body').on("click", function (ev) {
if( $(ev.target).hasClass('.dropdown') ) {
//you clicked on .dropdown element, do something
}
else {
//you clicked somewhere other than dropdown element
}
});

Watch elements count by class using jQuery

I have simple HTML:
ul > li > button
And have some JavaScript code:
$('.side-filters .filters_list li').each(function(){
$(this).find('button').click(function(){
var arrList = $('.side-filters .filters_list li .active').map(function(){
return $(this).attr('id');
}).get();
if($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$(this).addClass('active');
}
});
});
If I click on a button, add class 'active' to the button, and if clicked again, remove class.
I need live count elements witn class 'active'. If there is at least one given ul class 'someclass' and if I click again and have no elements with class active, remove 'someclass' from the Ul.
How can I do this?
There is no need to loop through the elements and add a click to every button. Add one listener.
//listen for click on a button
$('.side-filters', "click", ".filters_list li button", function(){
//toggle the active class on the button
var button = $(this).toggleClass("active");
//see if anything is selected
var hasSelection = $('.side-filters .filters_list li .active').length > 0;
//toggle a class on the closest ul based on if anything is selected.
button.closest("ul").toggleClass("someclass", hasSelection);
});
References:
toggleClass(class [, switch])
.closest( selector )
You can add this function ()
function someclass () {
var count = $('.active').length;
if (count >= 1) {
$('ul').addClass('clasHere')
} else {
$('ul').removeClass('clasHere')
}
}

Jquery how to disable functions for specific selectors?

This is my Jquery for my tabbed menu:
var current = $('li.selected');
$('li.selected #submenu').css("display", "block").addClass('lihovered');
current.addClass('lihovered');
$("ul#ulmenu li").hover(function() { //Hover over event on list item
$(this).find("#submenu").show(); //Show the subnav
$(this).addClass('lihovered');
current.removeClass('lihovered');
} , function() { //on hover out...
$(this).find("#submenu").hide(); //Hide the subnav
$(this).removeClass('lihovered');
current.addClass('lihovered');
});
$("ul#submenu").hover(function() { //Hover over event on list item
$(this).show(); //Show the subnav
$(this).parent("li").addClass('lihovered');
$(this).parent("li").find('a').addClass('lihovereda');
} , function() { //on hover out...
$(this).find("#submenu").hide(); //Hide the subnav
$(this).parent("li").removeClass('lihovered');
$(this).parent("li").find('a').removeClass('lihovereda');
current.addClass('lihovered');
});
The problem is that when hovered hover the li that is selected the bagground is removed.
Therefor I want to disable this function:
$("ul#ulmenu li").hover(function() { //Hover over event on list item
$(this).find("#submenu").show(); //Show the subnav
$(this).addClass('lihovered');
current.removeClass('lihovered');
} , function() { //on hover out...
$(this).find("#submenu").hide(); //Hide the subnav
$(this).removeClass('lihovered');
current.addClass('lihovered');
});
for $('li.selected');
And I also have that problem when hovering hover an another li element in the menu the selected submenu gets hidden. Therefor I want to disable this function:
$("ul#submenu").hover(function() { //Hover over event on list item
$(this).show(); //Show the subnav
$(this).parent("li").addClass('lihovered');
$(this).parent("li").find('a').addClass('lihovereda');
} , function() { //on hover out...
$(this).find("#submenu").hide(); //Hide the subnav
$(this).parent("li").removeClass('lihovered');
$(this).parent("li").find('a').removeClass('lihovereda');
current.addClass('lihovered');
});
for $('li.selected #submenu');
The problem is that the #li.selected #submenu gets hidden when hovering over the submenu or the li element. Which it should not do.
Update, I have tried this but it is (was not) working:
$("ul#ulmenu li").hover(function() { //Hover over event on list item
if($(this).hasClass('selected')) {
} else {
$(this).find("#submenu").show(); //Show the subnav
$(this).addClass('lihovered');
current.removeClass('lihovered');
}
} , function() { //on hover out...
$(this).find("#submenu").hide(); //Hide the subnav
$(this).removeClass('lihovered');
current.addClass('lihovered');
});
But it is very ugly with if else statements.
Use the not() method: http://api.jquery.com/not/
$("ul#ulmenu li").not('.selected').hover(function() {
and :not selector http://api.jquery.com/not-selector/
$('li:not(.selected) ul#submenu').hover(function() {

Categories

Resources