jquery - div - cambiar clase con javascript

JQuery: agregar clase al elemento: ¿no puede usar esta clase para el selector?

Question

Tengo el siguiente problema: para marcar un elemento en una situación diferente, deseo agregar una clase al elemento:

jQuery(''#menu-item-41 a'').addClass(''newsbox-closed1'');

Más tarde quiero hacer un poco de personal divertido cuando se hace clic en el elemento con esta clase, hasta ahora funciona bien:

jQuery(''.newsbox-closed1'').click(function(){
      jQuery(''#newsbox'').css(''display'', ''block'');
      jQuery(this).css(''background-color'', ''#FF33AB'').removeClass(''newsbox-closed1'').addClass(''news-open'');
 });

Hasta ahora todo está bien. El elemento obtiene la clase "noticias abiertas" y aparece la casilla de noticias. Pero luego, lo siguiente ya no funciona:

jQuery(''.news-open'').click(function(){
  alert(''JUCVJU'');
  jQuery(this).removeClass(''news-open'').addClass(''newsbox-closed2'');
  jQuery(''#newsbox'').css(''display'', ''none'');
});

Idea: cuando alguien vuelve a hacer clic en el mismo enlace, el buzón de noticias debería desaparecer y el enlace recibe una nueva clase. Esto no funciona: la clase "nueva apertura" no se elimina, la alerta no se muestra, nada. Además, el siguiente trabajo está a mitad de camino: es un botón de cierre en el buzón de noticias:

jQuery(''#close'').click(function(){
  jQuery(''#newsbox'').css(''display'', ''none'');
  jQuery(''.news-open'').removeClass(''news-offen'').addClass(''newsbox-closed2'')
});

El elemento con id "newsbox" desaparece pero la segunda parte no tiene efecto. La clase permanece de este elemento. No recibo ningún mensaje de error, nada ... ¿alguien tiene una idea de qué puede causar esto?

Mejor, Tobias

Answer 1

Está agregando clase en tiempo de ejecución. Cambio

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

a

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

Arriba está para JQuery> = 1.7

Para JQuery <1.7, use

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

en vivo y en el trabajo de JQuery para elementos creados en tiempo de ejecución también.

Answer 2

Probablemente necesite delegar su manejador de eventos, ya que está cambiando las clases después de que se carga el documento. Intenta reemplazar

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

con

jQuery(document).on(''click'', ''.news-open'', function(){

Sin embargo, si puede hacer eso más específico que un document , debería hacerlo. Delegue su evento en el contenedor más cercano de .news-open que pueda para una eficiencia óptima.

http://api.jquery.com/on/

Answer 3

¡¡¡Gracias chicos!!!

Para llevarlo al punto de todos los que enfrentan problemas similares, mi código de trabajo se ve de la siguiente manera:

jQuery(''#menu-item-41'').on(''click'', ''.news-open'', (function(){
  alert(''JUCVJU'');
  jQuery(this).removeClass(''news-open'').addClass(''newsbox-closed2'');
  jQuery(''#newsbox'').css(''display'', ''none'');
}));

El id "menu-item-41" es el id del contenedor que rodea mi elemento con la clase "news-open". Ahora recibo el recuadro de alerta cuando vuelvo a hacer clic en el elemento reclasificado y la casilla de noticias desaparece.

Answer 4

Problema muy similar: al hacer clic en un enlace, hago una animación para mostrar un div oculto, y ''.hideMe'' clases ''.hideMe'' al resto del diseño para que un clic en cualquier lugar fuera del div revelado lo oculte nuevamente. ''.hideMe'' no puede ser seleccionado por jQuery ya que no está presente en la carga de la página. Se .on() encadenando dos métodos .on() con delegación, como se muestra aquí: https://.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();
});

Esto es jQuery 1.10.x.