JQuery - Problema manejando eventos ("id='array[]'")

 
Vista:
sin imagen de perfil

Problema manejando eventos ("id='array[]'")

Publicado por Iván (7 intervenciones) el 06/08/2016 14:29:41
Hola a todos!!
Tengo un problema intentando manejar el evento "change" de unos selects que he creado de esta manera




jQuery('<select/>',
{
name: "selector_de_aceites[]",
id: "selector_de_aceites[]",
class: "formulario_aceites__input"

}).appendTo('#formulario_aceites');


Lo que estoy intentando hacer es lo siguiente


$( "[id='selector_de_aceites[]'" ).change (function()
{
//código
});



Pero no funciona. y tampoco me produce errores ni mensajes de advertencia...
No he logrado encontrar por ningun lado la correcta de hacer esto!!
¿alguien sabe que estoy haciendo mal?

Muchas gracias de antemano!!
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de Vainas
Val: 27
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Problema manejando eventos ("id='array[]'")

Publicado por Vainas (96 intervenciones) el 06/08/2016 18:06:27
Buenas:

1
2
3
4
$('#selector_de_aceites\\[\\]').change (function()
{
//código
});

Tu respuesta sale aqui: http://learn.jquery.com/using-jquery-core/faq/how-do-i-select-an-element-by-an-id-that-has-characters-used-in-css-notation/

Espero que el select se llame "selector_de_aceites[]" por que tienes varios que se van a llamar igual en la pagina..... y lo vas a recuperar como un array en php


Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
sin imagen de perfil

Problema manejando eventos ("id='array[]'")

Publicado por Iván (7 intervenciones) el 07/08/2016 00:56:01
Hola!!

Antes que nada, muchas gracias por contestar!! La verdad es que ya habia probado a hacerlo así y tampoco me funciona... Estoy empezando a pensar que esta no es la forma correta de hacer lo que quiero hacer...

Me explico!! Lo que quiero hacer es que cada vez que un selector cambie me haga un calculo. Entonces lo ideal para mi sería que un solo manejador se encargara de comprobar el estado de todos los selectores y haga ese calculo... Esa forma de hacerlo me seirve con elementos individuales pero cuando se trata de un array de elementos con el mismo nombre (como tu bien has dicho) parece ser que la cosa no anda.

Si quieres ver como funciona la aplicación la tengo alojada en esta url (ya sé que el aspecto es un poco cutre pero es que está en fase desarrollo) ;-)

http://calcujabon.hol.es/


Realmente lo que quiero hacer es eliminar el botón de "calcular" y que cada vez que cambie algun parametro me haga el calculo automaticamente y que así sea mas comodo de manejar...

Gracias otra vez y Saludos!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil

Problema manejando eventos (SOLUCIONADO)

Publicado por Iván (7 intervenciones) el 07/08/2016 03:42:02
Hola!!
Al final di con el problema!! Y ciertamente tu solución era la correcta, el problema era mi forma de aplicarla!! :-(
Ahora solo tengo que entender que es lo que en realidad estaba pasando... pero bueno, al menos funciona!!

El problema era que estaba insertando los selectores así.



var insertar = function(list)
{
jQuery('<select/>',
{
name: "selector_de_aceites[]",
id: "selector_de_aceites[]",
class: "formulario_aceites__input"
}).appendTo('#formulario_aceites');

}

y tenia el manejador fuera de la funcion "insertar"

$( '#selector_de_aceites\\[\\]' ).change(function()
{
alert( $(this).val() );
//$( "#formulario:first" ).submit();

});


Pero al ponerlo dentro de la función ha empezado a funcionar correctamente

var insertar = function(list)
{
jQuery('<select/>',
{
name: "selector_de_aceites[]",
id: "selector_de_aceites[]",
class: "formulario_aceites__input"
}).appendTo('#formulario_aceites');



$( '#selector_de_aceites\\[\\]' ).change(function()
{
alert( $(this).val() );
//$( "#formulario:first" ).submit();

});

}

La conclusion a la que llego es que hay que asignar los eventos cada vez que se inserta un elemento y que no sé puede hacer con todos a la vez. ¿O sí?... y que esta expresión $( '#selector_de_aceites\\[\\]' ) solo sirve para seleccionar el elemento actual (el último creado) ¿Es así?... Perdonen mi ignorancia pero es que soy nuevo con esto de jquery, vengo de C y C++.

Saludos a todos y muchas gracias por buestras respuestas!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de Vainas
Val: 27
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Problema manejando eventos (SOLUCIONADO)

Publicado por Vainas (96 intervenciones) el 07/08/2016 09:33:16
Buenas de nuevo:

Cito: "La conclusion a la que llego es que hay que asignar los eventos cada vez que se inserta un elemento"

hasta aqui tienes razon en el planteamiento. Si creas una etiqueta html dinamicamente le tienes que asignar el evento al momento de crearla ooooo uno por encima de ella como lo permite jQuery. Me explico. Si lo haces asi no tendras que asignar el evento cada vez que creas un nuevo input o tag html:

1
2
3
$("#id_de_tu_formulario").on('change', 'formulario_aceites__input', function(){
//código
});

Le asignas el onchange a tu formulario pero le dices que se ejecute cuando pase por los que tienen la clase formulario_aceites__input

Sobre esto otro:

Cito: "esta expresión $( '#selector_de_aceites\\[\\]' ) solo sirve para seleccionar el elemento actual (el último creado)"

tienes razon tambien (en parte) pero la culpa ha sido mia en no leer completamente tu planteamiento. en jQuery hacer esto $('#aqui_tu_id') es seleccionar un id solamente y asi $('.aqui_tu_class') es seleccionar una clase. id tiene que haber solo uno por etiqueta y la clase se le puede asignar a varios. Es decir si quieres asignar un evento a varios hazlo mediante clase... si es a uno solo por id.

Tienes mal lo de:

1
2
3
4
5
6
7
8
var insertar = function(list)
{
jQuery('<select/>',
{
name: "selector_de_aceites[]",
id: "selector_de_aceites[]",	  <=======
class: "formulario_aceites__input"
}).appendTo('#formulario_aceites');

Ya que como he explicado antes el id tiene que ser unico. Tendras que buscar una manera para que sea asi. El name esta bien por que es un array y la clase se puede repetir.

Saludos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil

Problema manejando eventos (SOLUCIONADO)

Publicado por Iván (7 intervenciones) el 07/08/2016 15:06:33
Hola de nuevo!!

Muchisimas gracias por la explicación!! Era justo lo que necesitaba para entender mejor como funciona todo esto!!

Un gran saludo!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar