I'm having a hard time finding any information that helps with this issue. I've tried several other options that worked for other people on here, but it doesn't seem to be working.
I have a div set up like this:
<div class="dynamic-content">
<div class="button"></div>
<div class="content"></div>
</div>
What I'm trying to do is apply a CSS animation to .dynamic-content when .button is clicked, by adding a specific class, and then removing that animation by clicking .button again and removing the specific class.
Here is my jQuery:
$(".button").on('click', function() {
if ($(".dynamic-content").hasClass('open')) {
$(".dynamic-content").removeClass('open'));
} else {
$(".dynamic-content").addClass('open'));
}
}
If I don't include the .removeClass() part, the addClass works perfectly. However, as soon as I put in the .removeClass, in the inspector, I can see .dynamic-content lighting up, as if targeted and acted on by JS, but nothing happens, not even .addClass is working.
That is because you have error in your code at line:
$(".dynamic-content").removeClass('open'));
//^Remove extra brace
Remove extra spaces and you are good to go.
You can also optimize your code by using .toggleClass():
$(".button").on('click', function() {
$(".dynamic-content").toggleClass('open');
});
JS:
$(".button").on('click', function() {
if ($(".dynamic-content").hasClass('open')) {
$(".dynamic-content").removeClass('open');
} else {
$(".dynamic-content").addClass('open');
}
});
Does the conditional work? Because ".dynamic-content" is a class, jQuery will get the first one it finds. Maybe there's another one on the page, which plays with your condition?
Another thing that may happen, as people have said, is that your extra ")" is breaking your function.
Either way, I would try toggleClass instead, it does exactly what your condition does:
$(".button").on('click', function() {
$(".dynamic-content").toggleClass("open")
}
If the class is there, it removes it, if not, it adds it.
Related
I have a <div> with a class of fouc that surrounds most of my main HTML elements. I have set this to display: none and would like to remove it as soon as the page finishes loading. However, this is not working as expected. Thank you for your help.
CSS:
.fouc {
display: none;
}
JS:
$(window).on('load', function () {
$('body').removeClass('fouc');
});
Try the following snippet
$(window).on('load', function () {
$('.fouc').show();
});
Hope it helps
You need to select the element in your JS which has the class fouc. In your case you are selecting the $('body') - which means your are telling the browser to remove the fouc class from body, which actually didn't exist.
You can find and remove the class, just like:
$('body').find('.fouc').removeClass('fouc');
But this isn't a good practice to do.
I want to click a span using jQuery. (I'm using rails and foundation)
<div class = "row my-row" id="current-my-row">
<div class = "large-12 my-row-heading" id="my-row-click">
<%= image_tag "some_img.png"%>
<span class="title">This is the title</span>
<span class="details"><%= image_tag "other_img.png"%>DETAILS</span>
</div>
<div class = "large-12 my-row-details">
all details
</div>
</div>
I have a jQuery function:
$('.details').on("click", function() {
.... whatever I want it to do...
//my-row-details slides down.
}
On clicking "DETAILS", whatever I want it to do happens.
But, as part of another jQuery function I want to trigger a click on it.
I tried :
$('.details').click();
$('.details').trigger("click");
$('#my-row-click .details').click();
$('#my-row-click').trigger("click");
$('.details').trigger("click");
$('#my-row-click > span:nth-child(3)').click();
$('#my-row-click > span:nth-child(3)').trigger("click");
But I can't seem to trigger a click. i.e. my-row-details does not slide down.
Any help?
UPDATE:
commented all the other code: (assume this is all the function on click does)
$('.details').on("click", function() {
$('.my-row-details').slideDown();
}
Instead of triggering a click, I tried replacing it with this line:
`$('.my-row-details').slideDown();`
This won't work either. But it works if I actually go click "DETAILS"
Both .click() and .trigger("click"); should actually work.
However, triggering an event, defined in your own code, sounds like a bad idea.
There is a better way to do this:
function openDetails() {
// Whatever you want to do
}
$('.details').on("click", openDetails);
"as part of another jquery function":
openDetails();
That way, you can be sure that this behavior is achieved, in a clear and readable way.
Found the problem.
The function that was calling the click() was to be executed on page load. Not on an event. And I had specified $('.my-row-details').hide(); on page load as well. Both of them were contradicting each other.
The solution was to specify display: none for my-row-details in css. And then call .click(); from jquery.
First check whether the click for that span is working or not by keeping an alert inside the click function, if it is not working then try this
$('.details').live('click', function(){
//your logic goes here
});
or your can try this
$(".details").bind("click", function(){
//your logic
});
Hope it works
I am trying to make an element disappear when clicked, the elements are dynamic.
$("#toast-container").on("click", "div.toast", function() {
$(this).fadeOut("fast", function() {
$(this).remove();
});
});
I have tried the code with just $(this).remove() and it works but using fadeOut it doesn't. I have no idea why and it looks absolutely fine to me
I have a easy solution.
HTML
<div id="toast-container">
<div class="toast">
Click Me
</div>
</div>
jQuery
$("div.toast").click(function(){
$(this).parent("#toast-container").fadeOut('slow');
// run your another event.
})
Check my live demo on jsfiddle
well when adding elements dynamically to DOM tree i think your events may register at creation of the page but when you add an element dynamically you should use another jquery function which is called delegate
see the documentation
What is this?
"div.toast"
If your div class is "toast", it should just be ".toast" (it will work with the div.toad, but syntactically, this is not really correct.
That said, your function works fine when I drop it in a fiddle. Are you certain that you are not getting any console errors perhaps related to another feature/function? Check your console.
I have to following code snippet. My understanding is that, the following code fires, when <li class="topics">Topics</li> is clicked on. However, what I am observing is that, the click function doesn't fire.
$(".li .topics").click(function () {
}
However, if I am removing the .li ,
$(".topics").click(function () {
}
Then the click function works fine, anything I am doing wrong here? Please advise
li is not a class, it is an element. what you can do is remove the period from the .li and have something like this:
$("li.topics").click(function () {}
Also, when you have a space between the classes, it looks for the second class to be nested inside of the first, however, when you remove the space, it looks for that element which has that class.
If you have a class "li" then this should also work
$(".li, .topics").click(function(){
alert("clicked");
});
Probably a rookie mistake, but my #button_1 ID isn't affected by the click() or hover() jQuery effects.
If someone could take a quick look at my JSFiddle, it would be greatly appreciated.
It's probably pretty obvious, but I want #button_1 to act as every other button. :)
Again, I suspect it's a pretty stupid mistake, something that I've overlooked.
Don't repeat so much code , try this and its working
Try line by line , its throwing error in somewhere in the code and breaking the bind events.
you have some error in hover or so , remove everything and have bind events, they are work.
You know this right ,when line 1 breaks in documentready , all bindings below may not get binded.
$(document).ready( function () {
$('#button_1,#button_2').click(function() {
alert('Handler for .click() called.');
});
});
Might I suggest condensing that code a little, to something closer to:
$('a div[class^="button"]').click(
function(e){
e.stopPropagation(); // prevent the click bubbling to the parent 'a' element
$('.button_active')
.removeClass('button_active')
.addClass('button_normal');
$(this).addClass('button_active').removeClass('button_normal');
});
JS Fiddle demo.
Edited in response to question from the OP:
Just to add, [the Fiddle updated by the OP to include the above code] actually sets "button_hover" as the class instead of "button_active", any idea why that would be?
Yep; that's in response to the specificity of the CSS selectors, I add and remove classes as needed in response events (rather than repeatedly checking for whether or not button_hover is set). As the element ends up with class="button_normal button_hover", and the order of the css (I think) places greater emphasis on the later-declared class, button_hover is maintained. It's late, and I'm a bit tired, but that's sort of (in a nutshell) what's happening.
The following demo incorporates everything (I think) that you need, and, coupled with revised CSS selectors, should do as you want:
$('a div[class^="button"]').hover(
function(){
$(this).addClass('button_hover').click(
function(e){
e.preventDefault();
$('.button_active')
.addClass('button_normal')
.removeClass('button_active');
$(this).addClass('button_active').removeClass('button_hover');
});
},
function(){
$(this).removeClass('button_hover');
});
CSS:
.button_active,
.button_normal.button_active { background: #000; }
.button_normal.button_hover { background: #ff0; }
.button_normal { background: #d89; }
JS Fiddle demo.
References:
attribute-begins-with (^=) selector.
e.stopPropagation().
removeClass().
addClass().