Hola!
Tengo una página que genera por php una serie de elementos a los cuales le quiero asignar eventos desde un JS separado. Este es mi ejemplo:
Código HTML:
<ul>
<li id="item_1">Autos</li>
<li id="item_1_data">
Ford - Chevrolette - Ferrari
</li>
<li id="item_2">Verduras</li>
<li id="item_2_data">
Papa - Zanahoria - Tomate
</li>
</ul> El PHP generará la lista colocando el numero de item (id="item_1") correspondiente. Para cada item, habrá un string con contenidos (id="item_1_data")
El evento sería, al hacer click sobre AUTOS ó VERDURAS se muestra / oculta el LI de abajo (por ejemplo, id="item_1_data")
La forma en que aprendí a aplicar los eventos desde afuera es esta:
Código HTML:
function addListener(Obj, event, eventHandler) {
//
if( Obj.addEventListener ) {
Obj.addEventListener(event, eventHandler, false);
} else if( Obj.attachEvent ) {
Obj.attachEvent("on"+event, eventHandler);
}
}
Esta funcion sería a prueba de Firefox e IE... ahora bien, vamos al
PROBLEMA:
Yo tengo una funcion que se llama switchDisplay(Obj). Chequea que el ELEMENTO pasado (Obj) tenga display: none; caso positivo lo pasa a BLOCK, casi negativo lo pasa a NONE.
Si yo hago switchDisplay(document.getElementById("item_1_data ")); la función muestra ó oculta el elemento con ID "item_1_data".
[Si, se que tiene que tener <element style="display: xxx;">]
En otras palabras, NECESITO mandarle a la funcion de forma dinamica un ID de elemento... que puede ser cualquier numero, lo genera el PHP.
Ahora bien, la funcion AddListener() espera como eventHandler NO una función, sino el nombre de la función sin atributos...
EJ:
addListener(document.getElementById("item_1"), "click", switchDisplay(document.getElementById("item_1_data ")) );
Cuando lo que en realidad debería ser algo asi:
addListener(document.getElementById("item_1"), "click", switchDisplay());
¿Cómo puedo asignar eventos a elementos cuyos ID son dinámicos?
Muchas gracias por su orientación!!!