jQuery: come passare i metadati evento su elementi HTML, pur mantenendo XHTML validità?

Question

Sono sicuro che molti di voi hanno incontrato questo dilemma in un momento o l'altro:

Ho un elemento HTML a livello di blocco che contiene elementi multipli a livello di blocco e livello di riga, per esempio.

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

Voglio semplicemente allegare un ajax jQuery () evento per un clic sul #ajax (l'elemento di livello superiore), ma ho bisogno di passare attraverso alcuni parametri allo script lato server.

Un possibile modo in cui sto vedendo è la semplice sostituzione div#ajax con a#ajax, che mi permettesse di aggiungere qualcosa di simile href="param=value&this=that", ma questo renderebbe la pagina non valida: non ci può essere alcun elementi block-level (<div>) all'interno di un elemento inline (<a>).

Un altro modo possibile sarebbe l'aggiunta di un attributo rel a div#ajax, che significherebbe anche la validazione XHTML trascurando.

Non voglio andare aggiunta di eventi in linea onclick a div, che è un po 'troppo lontano ... Inoltre, trasformando tutti i figli di div#ajax in es <span> sarebbe un grande pita.

Come si gestisce questo?

Grazie!

Answer 1

Ci sono diversi modi per andare su questo, pur mantenendo la validità XHTML, o almeno rimanendo funzionale completo in tutti i browser:

Prima opzione, mettere i parametri direttamente in qualche parte di JavaScript, questo è il più semplice.

---

In secondo luogo, se non si può fare questo nello script, è possibile utilizzare l'ancora, ma all'interno , non avvolgendolo, in questo modo:

<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 nasconderlo:

.params { display: none; }

E jQuery usarlo:

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

---

In terzo luogo, utilizzare HTML5 attributi dei dati , questo si romperà rigorosa XHTML validità, ma un ottimo modo per andare futuro, sarà causa nessun problema nei browser attuali.

---

Ultima opzione (che mi viene in mente), utilizzare il jQuery metadati plug o la conservazione ciò che si desidera.