¿Cómo implementar javascript discreto con generación de contenido dinámico?

Question

Escribo mucho contenido generado dinámicamente (desarrollo bajo PHP) y uso jQuery para agregar flexibilidad y funcionalidad extra a mis proyectos.

La cosa es que es bastante difícil agregar JavaScript de una manera discreta. Aquí hay un ejemplo:

Tiene que generar un número aleatorio de div elementos cada uno con diferentes funcionalidades activadas onClick. Puedo usar el atributo onclick en mis elementos div para llamar a una función JS con un parámetro, pero esa es solo una mala solución. También podría generar algún código jQuery junto con cada div en mi loop PHP for, pero de nuevo esto no será del todo discreto.

¿Cuál es la solución en situaciones como esta?

Answer 1

Debe agregar algo a los divs que define qué tipo de comportamiento tienen, luego use jQuery para seleccionar esos divs y agregar el comportamiento. Una opción es usar el atributo de clase, aunque podría decirse que esto debería usarse para presentación en lugar de comportamiento. Una alternativa sería el atributo rel, pero normalmente creo que también quieres especificar CSS diferentes para cada comportamiento, por lo que la clase probablemente sea correcta en esta instancia.

Así, por ejemplo, supongamos que desea pares e impares comportamiento:

<div class="odd">...</div> 
<div class="even">...</div> 
<div class="odd">...</div> 
<div class="even">...</div> 

Luego, en jQuery:

$(document).load(function() { 
$('.odd').click(function(el) { 
// do stuff 
}); 
$('.even').click(function(el) { 
// dostuff 
}); 
}); 

jQuery tiene un motor de selección muy potente que puede encontrar la base de cualquier basado en CSS selector, y también es compatible con algunos XPath y sus propios selectores. ¡Conócelos! http://docs.jquery.com/Selectors

Answer 2

Es difícil de decir por su pregunta, pero quizás pueda usar diferentes selectores jQuery para configurar diferentes comportamientos de clic. Por ejemplo, supongamos que tiene la siguiente:

<div class="section-1"> 
    <div></div> 
</div> 
<div class="section-2"> 
    <div></div> 
</div> 

Tal vez usted podría hacer lo siguiente en jQuery:

$('.section-1 div').onclick(...one set of functionality...); 
$('.section-2 div').onclick(...another set of functionality...); 

Básicamente, decidirá en función del contexto lo que debe suceder. También puede seleccionar todos los divs y probar algunos elementos principales o secundarios para determinar qué funcionalidad obtienen.

Tendría que saber más sobre los detalles de su situación para dar consejos más específicos, pero quizás esto lo ayudará a comenzar.

Answer 3

recomendaría sin tener en cuenta los estándares del W3C y escribir HTML propiedades de los elementos que necesitan controladores conectados a ellos:

Nota: esto no romper la prestación de la página!

<ul> 
    <li handler="doAlertOne"></li> 
    <li handler="doAlertTwo"></li> 
    <li handler="doAlertThree"></li> 
</ul> 

declarar un par de funciones:

function doAlertOne() { } 
function doAlertTwo() { } 
function doAlertThree() { } 

Y a continuación, utilizando jQuery, así:

$("ul li").each(function() 
{ 
    switch($(this).attr("handler")) 
    { 
     case "doAlertOne": 
      doAlertOne(); 
      break; 

     case ... etc. 
    } 
}); 

ser pragmático.

Answer 4

No tengo realmente no sé acerca de JQuery, pero sí sé que el conjunto de herramientas DOJO hace Javascript altamente discreto posible.

Tome un vistazo a este ejemplo:

La demo agrega dinámicamente eventos a una tabla html puramente basado en clases.

Otro ejemplo es las características de comportamiento, que se describen aquí: http://dojocampus.org/content/2008/03/26/cleaning-your-markup-with-dojobehavior/

Answer 5

Yo recomendaría que utilice esta cosa llamada "Event delegation". Así es como funciona.

Por lo tanto, si quiere actualizar un área, digamos un div y desea manejar los eventos discretamente, debe adjuntar un controlador de eventos al div mismo. Use cualquier marco que prefiera para hacer esto. El archivo adjunto del evento puede suceder en cualquier momento, independientemente de si ha actualizado el div o no.

El controlador de eventos adjunto a este div recibirá el objeto de evento como uno de sus argumentos. Al usar este objeto de evento, puede calcular qué elemento desencadenó el evento. Podrías actualizar el div varias veces: los eventos generados por los hijos del div subirán al div donde podrás capturarlos y manejarlos.

Esto también resulta ser una gran optimización del rendimiento si está pensando en conectar varios controladores a muchos elementos dentro del div.