Question

Hola, tengo un problema que me ha estado dando un dolor de cabeza durante dos días.

Quiero añadir "escuchadores" de eventos a varios enlaces en la página. EL objetivo es hacer una llamada ajax pasando parámetros que irán cambiando de valor para cada enlace.

El problema es que sólo se pasan los últimos valores de los parámetros al handler del addEventListener.

EL código que tengo es el siguiente:

vector_borrar_avisos = document.getElementsByClassName("borrar_aviso");

for (i = 0; i < vector_avisos.length; i++) {

    id_aviso = ids_avisos[i];

    nombre_tabla = nombres_tablas[i];

    vector_borrar_avisos[i].addEventListener("click", function () {event.stopPropagation(); borrar_aviso(id_aviso, nombre_tabla);}, false);

}

La verdad es que no entiendo porque ocurre esto, podría ser alguna deficiencia de javascript?

Answer 1

Hola Quijote,

sin ver la página completa en dónde se aplica esto es difícil de decir qué pasa, pero se me ocurre que tu código está asumiendo que si vector_borrar_avisos tiene por ejemplo 5 elementos, serán elementos del 0 al 4... cuando en realidad al borrar por ejemplo el aviso 3, tenés ahora 4 alementos no consecutivos y enpieza a fallar el addEventListener()

Esto dependerá en gran parte de dónde y cuándo se ejecuta el código que nos mostrás... podrías poner un

console.log(i, vector_borrar_avisos[i]);

adentro del bucle para ver si la asignación es siempre a los elementos correctos.

Saludos

Answer 2

No es ninguna falencia de javascript, creo que el problema es que en el loop por elevacion siempre vas a tener el ultimo elemento definido, deberias o hacer una funcion aparte o una anónima con argumentos, aca abajo te dejo un ejemplo que probe en jsfiddle. mira en tu consola como los elementos otros click 01...10 regresan el ultimo elemento (la letra "j") de un array con letras [a...o], mientras que al hacer click en click 01...10 te devuelve correctamente los valores de la a a la j.

quedando tu codigo algo asi:

vector_borrar_avisos = document.getElementsByClassName("borrar_aviso");

for (i = 0; i < vector_avisos.length; i++) {
    (function (id_aviso, nombre_tabla) {
        vector_borrar_avisos[i].addEventListener("click", function () {
            event.stopPropagation();
            borrar_aviso(id_aviso, nombre_tabla)
        ;}, false);
    }(ids_avisos[i], nombres_tablas[i]));
}

http://jsfiddle.net/ympoL1d1/2/embedded/result/
http://jsfiddle.net/ympoL1d1/2/

update: actualize el ejemplo