jQuery: wie Ereignis Metadaten auf HTML-Elemente passieren, während XHTML Gültigkeit beibehalten?

Question

Ich bin sicher, dass viele von Ihnen haben zu einer Zeit in diesem Dilemma kommen oder eine andere:

Ich habe ein Block-Level-HTML-Element, das mehrere Blockebene und Inline-Elemente enthält, z.

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

Ich möchte einfach ein jQuery Ajax () Ereignis zu einem Klick auf #ajax (das Element der obersten Ebene) befestigen, aber ich muss durch einige Parameter an den Server-Skript zu übergeben.

Ein möglicher Weg, ich sehe einfach ist div#ajax mit a#ajax ersetzt, die ich so etwas wie href="param=value&this=that" hinzufügen würde es ermöglichen, aber dies würde die Seite umgehend seine Gültigkeit: es keine Block-Level-Elemente sein kann (<div>) innerhalb von ein Inline-Element (<a>).

Eine andere Möglichkeit wäre ein rel Attribut div#ajax das Hinzufügen, das würde auch bedeuten, Vernachlässigen XHTML-Validierung.

Ich will nicht onclick Ereignisse divs Hinzufügen inline gehen, dass zu wenig ist weit ... Auch drehen alle Kinder von div#ajax in z.B. <span> wäre ein wichtiger Fladen.

Wie würden Sie damit umgehen?

Danke!

Answer 1

Es gibt mehrere Wege, um dies unter Beibehaltung XHTML Gültigkeit zu gehen, oder zumindest noch voll funktionsfähig in allen Browsern:

Erste Möglichkeit, die Parameter direkt in JavaScript irgendwo setzen, ist dies die einfachste.

---

Zweitens, wenn Sie dies im Skript nicht tun können, können Sie den Anker verwenden, aber innen , Einwickeln es nicht, wie folgt aus:

<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 Hiding es:

.params { display: none; }

Und jQuery verwenden es:

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

---

Drittens verwenden HTML5 Datenattribute , wird diese brechen strenge XHTML Gültigkeit, aber eine große Zukunft Weg zu gehen, wird es keine Probleme in aktuellen Browsern verursachen.

---

Die letzte Wahl (das ich mir vorstellen kann), verwenden Sie die jQuery Plugin Metadaten oder Speicherung was Sie wollen.