2012-07-30 11 views
5

Estoy intentando aplicar un estilo dinámicamente a algunas listas desplegables en mi página. Usando jQuery addClass realmente agrega la clase a todos los elementos 'Seleccionar', como puedo ver esto desde mi consola de Chrome. Sin embargo, los estilos no se aplican a los elementos.jQuery addClass no aplica el estilo dinámicamente

Ahora, si agrego manualmente la clase a cada elemento de selección individualmente, y luego guardo la página y la actualizo, el estilo se aplica al elemento.

¿Alguna idea de por qué el estilo no se aplica con la inyección de clase jquery?

$("select").addClass("select js-select"); 
+0

¿Puedes publicar un ejemplo en jsFiddle? – j08691

+0

¿Podría publicar una muestra de HTML y CSS? – hradac

+0

Por favor, publique un violín. Ayúdanos a ayudarte! – SexyBeast

Respuesta

2

Usted dijo que los estilos no se aplicaron, pero ¿las clases "select js-select" se agregaron a las entradas de selección? Entonces debe haber algún problema con el CSS o tal vez el navegador.

$ ("seleccionar"). AddClass (..) debería funcionar, no es necesario que especifique por ID o clase.

+0

Tiene razón, una vez que me di cuenta de que en realidad estaba apuntando al elemento seleccionado. – Chris

+0

Esto ahora está resuelto. Aquí está el violín con la inyección funcionando correctamente. El problema fue con el css y Javascript incluye. No funcionaban correctamente al agregarlos como recursos en el violín; sin embargo, al agregarlos como enlaces, funciona bien. Fiddle: [link] (http://jsfiddle.net/5qKV2/) –

+0

¿Entonces todo funciona ahora? Feliz de ayudar ;). – LazyTarget

2

Este ejemplo funciona:

<p><a href="#" id="clicker">Add Class</a></p> 
<div id="select">Hello World</div> 

Javascript

$("#clicker").click(function() { 

    $("#select").addClass("select js-select"); 
}); 

De su análisis de su código, parece que el $ ("select") debe tener ya sea un ID o selector de clase en eso. Al tener uno de esos selectores, su código conocerá el objetivo para aplicar los estilos. De lo contrario, tu código funciona bien.

Buena suerte, y espero que esto ayude.

+0

Aquí está el jsfiddle, espero que me puedan ayudar: [link] (http://jsfiddle.net/gc3wQ/2/) –

0

Funciona bien si cambia el onDomReady a onLoad. Como en http://jsfiddle.net/gc3wQ/9/

+0

Todavía no funciona. Los estilos aplicados son bastante sustanciales, y serían muy notables. Veo que usar 'onLoad' es inyectar las clases, sin embargo, los estilos no se aplican. Sin embargo, si coloca manualmente las clases en los elementos seleccionados, se aplicarán los estilos. –

+0

Ahora funciona, pero no solo en jsFiddle. http://jsfiddle.net/gc3wQ/11/ Adquiera el hábito de ajustar todo su código jQuery al lado de: $ (documento) .ready (función() { }); Vea también: http://docs.jquery.com/Tutorials:Introducing_%24%28document%29.ready%28%29 – LazyTarget

+0

¿Ve los estilos aplicados en el violín? Todavía no los estoy viendo. Agregue los estilos manualmente primero, para tener una idea de los estilos que intento inyectar. Estoy inyectando estos estilos en una forma dinámica en mi página, así que, teóricamente, si puedo inyectar los estilos en elementos selectos que creo en el dom, también debería ser capaz de inyectar los estilos en elementos creados dinámicamente. –

Cuestiones relacionadas