How to remove class after it been added - javascript

So I need a little bit of help. I'm playing around with addClass and removeClass and I can't seem to remove a class after it's set. What I basically want is:
When someone clicks an h3, it adds to its parent div class
When someone clicks a div with added class, class needs to be removed
First step I got out of way and it's working
$(function(){
$('div h3.itemTitle').on('click', function(){
$(this).parent().addClass('active').siblings().removeClass('active');
});
});
Now when I define:
$(function(){
$('div.active').on('click', function(){
$(this).removeClass('active');
});
});
It does nothing, as if it doesn't see classes. It sets only those set in onload...
Help, anyone?

The child element "h3.itemTitle" already had a click event listener on it and the parent can't actually capture the click event.
Your $('div.active').on('click', ...) never actually fires because you click the h3 not the div.
I recommend this approach: http://jsfiddle.net/c3Q6Q/
$('div h3.itemTitle').on('click', function () {
// saves time not to write $(this).parent() everything so i store in a _parent var
var _parent = $(this).parent();
if (_parent.hasClass('active')) {
_parent.removeClass('active');
} else {
_parent.addClass('active').siblings().removeClass('active');
}
});

Try
$('body').on('click','div.active', function(){$(this).removeClass('active');});
Instead of
$('div.active').on('click', function(){$(this).removeClass('active');});

I would go with this way:
$('div').on('click', function(e){
var el = e.target;
if($(el).is('h3') && $(el).hasClass('itemTitle')){
$(this).parent().addClass('active').siblings().removeClass('active');
}else if($(el).is('div') && $(el).hasClass('active')){
$(this).removeClass('active');
}
});

Not sure why every is talking about elements generated outside of the initial DOM load.
Here's a JSFiddle showing that it works: http://jsfiddle.net/H25bT/
Code:
$(document).ready(function() {
$('.itemTitle').on('click', function() {
$(this).parent().addClass('active').siblings().removeClass('active');
});
/* $('.parent').on('click', function() {
$(this).removeClass('active');
}); */
$('.clicky').on('click', function() {
$(this).parent().removeClass('active');
});
});
The reason it's not working for you is that if you put the removeClass click event on the parent div itself, clicking on the child text causes a conflict with which click handler to use, and it won't work out. Code works fine if you don't assign the click to the parent div itself.

Related

Basic Popup window not working properly

Having a small problem with a popup window I am trying to create.
When a button(anything with a certain ID) is clicked it should open(this seems to work) but then when it is open I want it so if you click on anything but the main popup window it should close.
But it does not seem to close when I click on the .overeverythingCover which has width: 100% and height: 100%;
http://jsfiddle.net/mnW7U/
$('#activatePopOver, .overeverythingCover').click(function() {
popUpOverEverything();
});
function popUpOverEverything(data) {
// if exists | remove it
if ($('.overeverythingCover').length) {
$('.overeverythingCover').empty();
$('.overeverythingCover').removeClass();
$('body').css('overflow', 'scroll');
console.log("hehe");
} else {
$('body').append('<div class="overeverythingCover"</div>');
$('.overeverythingCover').append('<div class="overEverything"</div>');
$('body').css('overflow', 'hidden');
$('.overEverything').html(data);
};
}
Thank you!
You can't use "click" handler to an element which not exist yet. You can use .live :
$(function() {
$('#activatePopOver, .overeverythingCover').live('click', function() {
popUpOverEverything();
});
function popUpOverEverything(data) {
if ($('.overeverythingCover').length > 0) {
$('.overeverythingCover').remove();
$('body').css('overflow', 'scroll');
} else {
$('body').append('<div class="overeverythingCover"</div>');
$('.overeverythingCover').append('<div class="overEverything"</div>');
$('body').css('overflow', 'hidden');
$('.overEverything').html(data);
// Just close when you click outside the popup
$('.overEverything').click(function(event){
event.stopPropagation();
});
};
}
});
See the Fiddle : http://jsfiddle.net/mnW7U/3/
use a delegate event listener such as:
$(document).on("click", '#activatePopOver, .overeverythingCover', function() {
popUpOverEverything();
});
Like The Wobbuffet mentioned, the issue is that the .overerverythingCover div isn't on the page at the time you're binding your event.
NOTE: This will only work with jQuery 1.7+
for older versions you can use .delegate()
The problem was that you are binding a click event to an element that not yet exists on the page.
I have updated your fiddle with a simple to understand example: http://jsfiddle.net/mnW7U/2/
I created a popDown() function that gets bound with the following function when the button is clicked:
$('.overeverythingCover').click(function() {
popDown();
});
The problem is this:
$('body').append('<div class="overeverythingCover"</div>');
It is being appended after the click event is added to it. Try adding it to the dom (none-js in the html) then messing with it's display property.

Change class but click not recognizing the new class

I have the following html:
<div class="showMap" id="mapVis" style="cursor:pointer">(Show map)</div>
<div id="map">hello world</div>
Div #map is hidden as shown below (there's a reason for hiding it this way, it holds a google map), then I want to click (Show map) and the div appears. This is ok. Then I change the class and the html of the #mapVis div and want the next click to hide #map - but it doesn't. Honestly I don't know what its doing but its as if it ignores the new class and reverts to the actions as if previous class was still attached to the #mapVis div.
Here's the JQuery:
var map2 = $('#map');
map2.css('position','absolute').css('left','-9999em');
$('.showMap').click(function(){
map2.hide().css('position','relative').css('left','0em').slideDown();
$('#mapVis').removeClass('showMap').addClass('hideMap').html('(Hide map)');
});
$('.hideMap').click(function(){
map2.css('position','absolute').css('left','-9999em');
$('#mapVis').removeClass('hideMap').addClass('showMap').html('(Show map)');
});
Here's a fiddle
Since your selectors have to be evaluated dynamically you need to use event delegation.
When you use normal event registration the selectors are evaluated only at the time of event registration and any changes done on the element will not reflect in the registered handlers.
var map2 = $('#map');
map2.css('position', 'absolute').css('left', '-9999em');
$(document).on('click', '.showMap', function () {
console.log('hey2');
$('#map').hide().css('position', 'relative').css('left', '0em').slideDown();
$('#mapVis').removeClass('showMap').addClass('hideMap').html('(Hide map)');
});
$(document).on('click', '.hideMap', function () {
console.log('hey');
$('#map').hide();
$('#map').css('position', 'absolute').css('left', '-9999em');
$('#mapVis').removeClass('hideMap').addClass('showMap').html('(Show map)');
});
Demo: Fiddle
jsfiddle: http://jsfiddle.net/7At32/
this is a sample, BUT you can modify to your requirement
$('#mapVis').click(function () {
if ($(this).hasClass("showMap")) {
$('#map').show();
$(this).removeClass('showMap').addClass('hideMap').html('(Hide map)');
} else {
$('#map').hide();
$(this).removeClass('hideMap').addClass('showMap').html('(Show map)');
}
});

Changing from .live to .on

I know .live was depreciated and recently I was updating a page and realized I was using .live I would like to switch to .on but do not understand what to change. Here is my current code:
//Script for Choosing which form to display
$("#email-button, #text-button").live('click',
function(){
//figure out what button was clicked.
if(this.id === "email-button"){
var btnA = $(this);
var btnB = $("#text-button");
var divA = $('#email-form');
var divB = $('#text-form');
}
else{
btnA = $(this);
btnB = $("#email-button");
divA = $('#text-form');
divB = $('#email-form');
}
//make sure it is not already active, no use to show/hide when it is already set
if(btnA.hasClass('dark_button_span')){
return;
}
//see if div is visible, if so hide, than show first div
if(divB.is(":visible")){
divB.fadeOut("slow", function(){
divA.fadeIn("slow");
});
}
else{//if already hidden, just show the first div
divA.fadeIn("slow");
}
//Add and remove classes to the buttons to switch state
btnA.addClass('dark_button_span').removeClass('light_button_span');
btnB.removeClass('dark_button_span').addClass('light_button_span');
}
);
I had assistance writing the above script and do not know what to change. Simply changing .live to .on doesn't work.
Any help would be greatly appreciated!
Thanks!
The syntax for on is
$("containerElement").on("click", "targetElement(s)", function(){ });
So in your case it could be
$("body").on("click", "#email-button, #text-button", function(){ });
But being more specific than body is a good idea.
$(document).on('click', '#email-button, #text-button', function() {
// Your code
});
Should do the trick. See http://api.jquery.com/live/ and http://api.jquery.com/on/.
However, since you're using IDs, you probably don't even need .live() or delegating .on(). So the way I'd write that would be simply:
function doButtons(btnA, btnB, divA, divB) {
btnA = $(btnA); btnB = $(btnB); divA = $(divA); divB = $(divB);
// Make sure it is not already active, no use to show/hide when it is already set
if (btnA.hasClass('dark_button_span'))
return;
// See if div is visible, if so hide, then show first div.
if (divB.is(":visible")) {
divB.fadeOut("slow", function (){
divA.fadeIn("slow");
});
}
else // If already hidden, just show the first div.
divA.fadeIn("slow");
// Add and remove classes to the buttons to switch state.
btnA.addClass('dark_button_span').removeClass('light_button_span');
btnB.removeClass('dark_button_span').addClass('light_button_span');
}
$('#email-button').click(function () {
doButtons(this, '#text-button', '#email-form', '#text-form');
});
$('#text-button').click(function () {
doButtons(this, '#email-button', '#text-form', '#email-form');
});
jQuery's .on doesn't use event delegation unless you provide it a selector. In the above code, .live listens for events at the document, but that's far too much bubbling. If we were to implement it with .on though we would do the following:
var handler = function( e ) {
console.log( "Clicked" );
};
$( document ).on( "click", "#email-button, #text-button", handler );
Again though, it isn't really all that wise to listen for events on the document; ideally you would pick an element just above your selector. So if #email-button and #text-button have a common parent, you should use that in place of document.

jquery selector help. Everything but the specified selector

I have the following function to open an overlay menu:
$('.context-switch').click(function() {
$(".context-switch-menu").toggle();
});
To hide the menu, I would like the user to be able to click on any area outside ".context-switch-menu"
I am trying with :not() but with no success..
$('body').click(function(e) {
if ($(e.target).hasClass('context-switch')) {
return;
}
$(".context-switch-menu").hide();
});
$('.context-switch').click(function() {
$(".context-switch-menu").toggle();
return false;
});
The reason this can be difficult is because of event bubbling.
You can try something like this:
$('.context-switch').click(function(e) {
e.stopPropagation();
$(".context-switch-menu").toggle();
});
$(".context-switch-menu").click(function(e){
e.stopPropagation();
});
$("body").click(function(e){
$(".context-switch-menu").hide();
});
The e.stopPropagation() prevents the click event from bubbling to the body handlers. Without it, any click to .context-switch or .context-switch-menu would also trigger the body event handler, which you don't want, as it would nullify the effect of the .context-switch click half the time. (ie, if the state is hidden, and then you click to show, the event would bubble and trigger the body handler that would then hide the .context-switch-menu again.)
Without testing, would something like this work?:
$('.context-switch').click(function() {
$(".context-switch-menu").show();
});
$(document).click(function() {
$(".context-switch-menu").hide();
});
Instead of using document, 'html' or 'body' may work as well.
$(document).on('click', function(e) {
if (e.target.className !='context-switch-menu') {
$(".context-switch-menu").hide();
}
});
Just an idea here, based on what what others have suggested in the past:
$(document).click(function(e){
//this should give you the clicked element's id attribute
var elem = $(e.target).attr('classname');
if(elem !== 'context-switch-menu'){
$('.context-switch-menu').slideUp('slow');
//or however you want to hide it
}
});
try this, we don't want to call a function when you clicked on the element itself, and not when we click inside the element. That's why we need 2 checks.
You want to use e.target which is the element you clicked.
$("html").click(function(e){
if( !$(e.target).is(".context-switch-menu") &&
$(e.target).closest(".context-switch-menu").length == 0
)
{
alert("CLICKED OUTSIDE");
}
});
Live fiddle: http://jsfiddle.net/Xc25K/1/

Update dynamic html attribute

What im trying to do is when the p inherits the class "active" that div.test will print the link rel correctly.
Currently if the page loads without the class assigned to the p tag, it will not. How can I make it happen when the p tag inherits the class "active" the link printed in div.test will get the rel printed correctly?
$(document).ready(function(){
var relvar = $('p.active').attr('rel');
$("div.test").html("<a rel='"+ relvar +"'>hello</a>");
$("p").click(function () {
$(this).toggleClass("active");
});
});
I am not sure what you asking. Are you saying that you would like this code:
var relvar = $('p.active').attr('rel');
$("div.test").html("<a rel='"+ relvar +"'>hello</a>");
To be run whenever the <p> element changes classes? If so, there is no "onchangeclass" event or anything like that, but you could actually create your own event to handle this:
$('p').bind('toggleActive', function() {
if($(this).hasClass('active')) {
var relvar = $(this).attr('rel');
$("div.test").html("<a rel='"+ relvar +"'>hello</a>");
}
}).click(function() {
$(this).toggleClass('active').trigger('toggleActive');
});
Check this code in action.
This is actually kind of roundabout - it would be simplest to just do the logic in the click handler itself. The main advantage of moving it to its own event is that if you then need to do this elsewhere in the code you can keep that logic separate and just "trigger" it as you need.
Not quite sure if this is what you are going for, but can you not handle it in the click code?
$(document).ready(function() {
$('p').click(function() {
$(this).toggleClass('active');
if ($(this).hasClass('active')) {
relvar = $(this).attr('rel');
$('div.test').html("<a rel='" + relvar + "'>hello</a>");
} else {
$('div.test').html("<a>hello</a>");
}
});
});
As far as I know, you will have to bind to some event in order for it to check and see if it needs to update the div.

Categories