jQuery: cómo pasar metadatos de sucesos en los elementos HTML mientras se mantiene la validez XHTML?

Question

Estoy seguro de que muchos de ustedes han llegado a través de este dilema en un momento u otro:

I tienen un elemento HTML a nivel de bloque que contiene elementos a nivel de bloque múltiple y a nivel de línea, por ejemplo.

<div id="ajax">
   <h2>Something</h2>
   <div class="icon"></div>
   <div class="clear"></div>
   <div class="somethingelse"><h3>blah</h3></div>
</div>

Simplemente quiero adjuntar una ajax jQuery () evento para un clic en #ajax (el elemento de nivel superior), pero tengo que pasar a través de unos parámetros al script del lado del servidor.

Una de las posibilidades que estoy viendo es una simple sustitución de div#ajax con a#ajax, lo que permitiría que añada algo así como href="param=value&this=that", pero esto haría que la página no válida: no puede haber ningún elemento a nivel de bloque (<div>) en el interior de un elemento en línea (<a>).

Otra forma posible sería la adición de un atributo rel a div#ajax, lo que también la validación XHTML media descuido.

No quiero ir añadiendo eventos en línea onclick a divs, que es un poco demasiado lejos ... También, convirtiendo todos los niños de div#ajax en, por ejemplo, <span> sería una pita importante.

¿Cómo manejar esto?

Gracias!

Answer 1

Hay varias maneras de hacer esto mientras se mantiene la validez XHTML, o al menos queda completamente funcional en todos los navegadores:

La primera opción, puso a los parámetros directamente en JavaScript en algún lugar, este es el más simple.

---

En segundo lugar, si no se puede hacer esto en el guión, se puede utilizar el ancla, pero dentro de , no envolviéndolo, como esto:

<div id="ajax">
   <h2>Something</h2>
   <div class="icon"></div>
   <div class="clear"></div>
   <div class="somethingelse"><h3>blah</h3></div>
   <a class="params" href="page.htm?param=value&this=that"></a>
</div>

CSS ocultarlo:

.params { display: none; }

Y jQuery utilizarlo:

$("#ajax").click(function() {
   $.ajax({
     url: $(this).find(".params").attr("href");
     success: function() {
       //do something
     }
   });
});

---

En tercer lugar, usar HTML5 atributos de datos , esto va a romper el estricto XHTML validez, pero una gran manera de futuro para el final, que va a causar ningún problema en los navegadores actuales.

---

Última opción (que se me ocurre), utilice el jQuery plugin de metadatos o almacenar lo que quiere.