JQuery: add class to element - cannot use this class for selector?

问题

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

回答1:

You are adding class at runtime. Change

jQuery('.news-open').click(function(){

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.

回答2:

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/

回答3:

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.

回答4:

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.

来源：https://stackoverflow.com/questions/12202114/jquery-add-class-to-element-cannot-use-this-class-for-selector

标签

jquery

jquery-selectors

addclass