I have a follow up question to this: Add and remove a class on click using jQuery?
I'm able to add a class to a specific li element using this snipped by Jamie Taylor:
$('.team').on('click', 'li', function() {
$('.team li#member').removeClass('more');
$(this).addClass('more');
});
I'd like to remove the Class .more again, by clicking a toggle element inside the li-item.
My jQuery Snippet which doesn't work:
$('.toggle-x').click(function () {
$('.team li#member').removeClass('more');
})
Thanks for the help!
In your code, it will remove the class form only one element with id member. If you want to remove the class from all the li elements, use like this,
$('.team li.more').removeClass('more');
try this
$(".innerLiContent").click(function(){
$(this).parentsUntil( "li" ).removeClass('more');
});
Your problem is because when you click on an element X inside the <li /> the element fires the click event, and if you don't use event.stopPropagation() the <li /> will also fire the click event and the class will be added again.
Try this:
$('.toggle-x').click(function (e) {
$('.team li#member').removeClass('more');
e.stopPropagation();
})
It should work if that's your problem.
Related
I've got some jQuery that I'm using to change a class of two elements. It works once, and the elements change class once, but I want it to work interchangeably. so when they click they click the 'deselected' button it assigns itself the 'selected' class, and the 2nd button changes to a 'deselected' class.
Here's the jQuery:
$('.network_bar_deselected').on('click', function(){
$('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
$(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});
and the HTML is quite simple:
<div class="network_bar_selected"><h4>Network Updates</h4></div>
<div class="network_bar_deselected"><h4>Latest Tweets</h4></div>
Since you're changing classes dynamically, you should use delegation:
$(document).on("click", ".network_bar_deselected", function() {
$('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
$(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});
Your original code only binds the handler to the elements with the network_bar_selected class when the document is loaded, not to elements that get that class later.
Add the handler to both the classes
$('.network_bar_selected, .network_bar_deselected').on('click', function () {
$('.network_bar_selected').removeClass('network_bar_selected').addClass('network_bar_deselected');
$(this).removeClass('network_bar_deselected').addClass('network_bar_selected');
});
Demo: Fiddle
I have data which is loaded via ajax and I would like to disable a click event on li element which has a class active, the below is what I tried. can someone help me out?
$('body').on("click", 'li *:not(.active)', function (e) {
//do something
}); //this doesn't work
You are targeting all non-active descendants of list items.
Remove the universal selector
Remove the descendant combinator
Such:
'li:not(.active)'
If the active class is on the li then remove the space and * (which targets all descendant elements that do not have the active class)
$('body').on("click", 'li:not(.active)', function (e) {
//do something
}); //this doesn't work
Um, that code is not looking at an li element, thatmselector is looking for a child of an li element. Get rid of the space and * and it will check the li.
li:not(.active)
I have a little problem here, and if someone could help me, I will truly appreciate.
I have a menu that opens when I click on a div, and once open, I want to close the menu clicking again on te same div. The problem is that I can open the menu but I can't close it.
Here is my code:
<script>
$(document).ready(function () {
$("#menuResp").click(function () {
$('#profile_menu').css('margin-left','0px');
$('#menuResp').css('margin-left','315px');
$('#menuResp').attr('id', 'menuResp2')
});
$("#menuResp2").click(function () {
$('#profile_menu').css('margin-left','-300px');
$('#menuResp2').css('margin-left','0px');
$('#menuResp2').attr('id', 'menuResp')
});
});
</script>
<div id="menuResp">
<ul id="menuRespCss">
<li class="icon-css">
<a>Menu</a>
</li>
</ul>
</div>
Anyone have an idea of why this doesn't work?
What your code is doing is setting callbacks at the moment, when the initial DOM is being built. Of course, there is no #menuResp2 yet. Insdead, set the callback on the document element (or body, or some other parent element), specifying the selector of your menu - this element will fire the event. This will work:
$(document).ready(function () {
$(document).on('click', "#menuResp", function () {
$('#profile_menu').css('margin-left','0px');
$('#menuResp').css('margin-left','315px');
$('#menuResp').attr('id', 'menuResp2')
}).on('click', "#menuResp2", function () {
$('#profile_menu').css('margin-left','-300px');
$('#menuResp2').css('margin-left','0px');
$('#menuResp2').attr('id', 'menuResp')
});
});
But. I would stroungly recommend not to change the ID attribute, but to work with classes instead.
you need to add the click handler like this
$(document).on('click', '#menuResp', function(){
$('#profile_menu').css('margin-left','0px');
$('#menuResp').css('margin-left','315px');
$('#menuResp').attr('id', 'menuResp2');
});
.click() only works for elements that are already created, using .on() will cover elements that will be created later.
you should really be identifying the element by class though , and using .addClass() and .removeClass() like the comment suggest
just use toggle. if the item is closed, it will open, if its open, it will close. all the answers above do not check to see if the item is open already or not.
$(document).on("click", function(e){
e.preventDefault();
$('#menuResp').toggle();
$("##menuResp2").toggle();
})
easier would be to give element a single class and just toggle once on class name, rather than changing the ID of the item, this second item would not have an avent binding added to it. But at the same time. You dont need the ID when you can just toggle with class. like so:
$(".clasname").toggle();
this will open any element that is closed with the class of clasname. this will also, at the same time, close all elements that have that class name, and are also open
Let me define the problem a little bit more:
i have
<div class="contact">
<div id="form"></div>
<div id="icon"></div>
</div>
i want onclick on #icon, to change the class of .contact to .contactexpand( or just append it).
Then i want that the on body click to change the class back, but of course that shouldnt happen when clicking on the new class .contactexpand, and if possible that clicking on icon again changes the class back again.
I tried numerous examples and combinations but just couldn't get the right result and behavior.
Check this: Working example
Let's go step by step
I want onclick on #icon, to change the class of .contact to .contactexpand( or just append it). […] and if possible that clicking on icon again changes the class back again.
You want to use the toggleClass() method to achieve this. Simply:
$('#icon').on('click', function(e){
$(this).parent()
.toggleClass('contact')
.toggleClass('contactexpand');
});
Then i want that the on body click to change the class back
You will have to make sure that body removes contactexpand class and adds contact. At this point I would just give the container element an id (or class if you prefer), just to make things simpler. Then what you do is pretty simple:
$('body').on('click', function(e){
$('#thisdiv')
.removeClass('contactexpand')
.addClass('contact');
});
but of course that shouldnt happen when clicking on the new class .contactexpand.
This is the step that the other answers missed, I think. Since everywhere you click, you also click on the body element, you will always trigger the click event on the body, hence removing the contactexpand class and adding the contact one.
Enter event.stopPropagation(). This method will make sure that the events doesn't bubble up the DOM, and will not trigger the body click.
$('#thisdiv').on('click', function(e){
e.stopPropagation();
});
Working example
You can add a class to parent element like the following code.
$(".contact #icon").click(function(){
var element = $(this).parent(".contact");
element.removeClass("contact").addClass("contactexpand");
});
I like to the jQuerys toggleClass function like so:
$('#icon').click(function(){
$('#contactbox').toggleClass('contact');
$('#contactbox').toggleClass('contactexpand');
});
Or you could use addClass('className') and removerClass('className') if you would like to apend it rather than toggle it :)
Here is an example: http://jsfiddle.net/aUUkL/
You can also add an onclick event to the body of the page and use hasClass('className') to see whether or not to toggle the class when the body is clicked. You could use something like this (Although I havent tested this bit!):
$('body').click(function(){
if( $('#contactbox').hasClass('contactexpand') ){
$('#contactbox').addClass('contact');
$('#contactbox').removeClass('contactexpand');
}
});
You can do this
$('body').on('click', function(event) {
if ($(event.target).attr('id') == 'icon') {
$(event.target).parent().toggleClass('contactexpand');
} else {
$('.contact').removeClass('contactexpand');
}
});
Check out this jsfiddle
var $contact = $('.contact');
$contact.find('#icon').click(function(e, hide) {
e.stopPropagation();
$contact[hide ? 'removeClass' : 'toggleClass']('contactexpand');
});
$(document).on('click', function(e) {
if (e.srcElement === $contact[0]) return;
$contact.find('#icon').trigger('click', true);
});
http://jsfiddle.net/kZkuH/2/
In the below markup, the #enable button will add a class to the #show div. This class has a method attached to it that fades in/out the #hidden span.
However, even though the class is added to the #show div, the method attached to the class isn't triggered.
HTML
<input type='button' id='enable' value='Enable' />
<div id='show'>
Testing.. <span id='hidden'>Testing, 1, 2, 3.</span>
</div>
JS
$(function() {
// Adds .testing class after the button is clicked. however..
$('#enable').click(function() {
$('#show').addClass('testing')
});
// It will not trigger after .testing class has been added to DIV?
$('.testing').hover(function() {
$('#hidden').fadeIn();
}, function() {
$('#hidden').fadeOut();
});
});
Fiddle to work with: http://jsfiddle.net/jS3nM/
It seems I am missing something conceptually. What is the correct way to handle this?
jQuery does not work like CSS. When you do, $("selector"), it will return a list of elements in the document that match that selector right now.
You will then operate on those elements with jQuery methods. There is no magic like "class-targeted method" going on.
You can find add a event listener to document:
$(document).on({
mouseenter: function() {
$('#hidden').fadeIn();
},
mouseleave: function() {
$('#hidden').fadeOut();
}
}, ".testing");
document is always found and always exists, and the event listener is added to that. The selector at the end filters out what elements are qualified for the event.
Because when you bind the hover handler there is no element with class of testing in the document, you should delegate the event, you can use the on method, try the following"
$(document).on('mouseenter', '.testing', function(e) {
$('#hidden').fadeIn();
});
$(document).on('mouseleave', '.testing', function(e) {
$('#hidden').fadeOut();
});