I have the following problem: in order to mark an element during different situation I want to add a class to the element:
jQuery('#menu-item-41 a').addClass('newsbox-closed1');
Later I want to do some funny staff when the element with this class is clicked - so far it works fine:
jQuery('.newsbox-closed1').click(function(){
jQuery('#newsbox').css('display', 'block');
jQuery(this).css('background-color', '#FF33AB').removeClass('newsbox-closed1').addClass('news-open');
});
Until now everything is just fine. The element gets the class "news-open" andf the newsbox appears. But then the following does not work anymore:
jQuery('.news-open').click(function(){
alert('JUCVJU');
jQuery(this).removeClass('news-open').addClass('newsbox-closed2');
jQuery('#newsbox').css('display', 'none');
});
Idea: when someone clicks on the same link again, the newsbox should disappear and the link gets a new class. This does not work - the class "new-open" is not removed, the alertbox is not shown, nothing.
Additionally the following work half the way - it is a close button on the newsbox:
jQuery('#close').click(function(){
jQuery('#newsbox').css('display', 'none');
jQuery('.news-open').removeClass('news-offen').addClass('newsbox-closed2')
});
The element with id "newsbox" disappears but the second part has no effect. The class remains of this element. I get no error messages, nothing... does anyone has an idea what can cause this?
Best,
Tobias
You are adding class at runtime. Change
jQuery('.news-open').click(function(){
to
jQuery('.news-open').on('click',(function(){
Above is for JQuery >=1.7
For JQuery <1.7, use
jQuery('.news-open').live('click',function(){
live and on in JQuery work for elements created at runtime too.
You probably need to delegate your event handler, since you're changing classes after the document loads. Try replacing
jQuery('.news-open').click(function(){
with
jQuery(document).on('click', '.news-open', function(){
If you can make that more specific than document, though, you should. Delegate your event to the closest container of .news-open that you can for optimal efficiency.
http://api.jquery.com/on/
Thank you guys!!!
To bring it to the point for everybody else facing similar problems my working code looks the following:
jQuery('#menu-item-41').on('click', '.news-open', (function(){
alert('JUCVJU');
jQuery(this).removeClass('news-open').addClass('newsbox-closed2');
jQuery('#newsbox').css('display', 'none');
}));
The id "menu-item-41" is the id of the container which surrounds my element with class "news-open". Now I get the alert box when I click again on the further re-classed element and the newsbox disappears.
Very similar problem: on clicking a link, I do an animation to show a hidden div, and add '.hideMe' classes to the rest of the layout so that a click anywhere off the revealed div will hide it again. '.hideMe' cannot be selected by jQuery since it is not present on page load. Solved by chaining together two .on() methods with delegation, as shown here: https://stackoverflow.com/a/8261148
$(document.body).on('click', '#link', function() {
$('div').addClass('.hideMe').animate(); // animation code here
$('#newdiv').show();
}).on('click', '.hideme', function() {
$('div').removeClass('.hideMe').animate(); // animation code here
$('#newdiv').hide();
});
This is jQuery 1.10.x.
