jQuery: comment passer les métadonnées des événements sur des éléments HTML tout en maintenant la validité XHTML?

Question

Je suis sûr que beaucoup d'entre vous ont rencontré ce dilemme à un moment ou un autre:

I ai un élément HTML de type bloc qui contient des éléments multiples de niveau bloc et de niveau en ligne, par exemple.

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

Je veux simplement joindre un événement ajax () jQuery à un clic sur #ajax (l'élément de niveau supérieur), mais je dois passer à travers quelques paramètres du script côté serveur.

Une façon possible que je vois est simplement remplacer div#ajax avec a#ajax, ce qui me permettrait d'ajouter quelque chose comme href="param=value&this=that", mais cela rendrait le malade page: il ne peut y avoir aucun élément de niveau bloc (<div>) à l'intérieur un élément en ligne (de <a>).

Une autre façon possible serait d'ajouter un attribut rel à div#ajax, qui signifieraient également la validation XHTML négliger.

Je ne veux pas aller ajouter des événements de onclick en ligne à divs, qui est un peu trop loin ... En outre, tous les enfants de transformer div#ajax en exemple <span> serait une grande pita.

Comment voulez-vous gérer cela?

Merci!

Answer 1

Il y a plusieurs façons d'aller à ce sujet, tout en maintenant la validité XHTML, ou tout au moins en restant fonctionnelle complète dans tous les navigateurs:

La première option, mettre les paramètres directement quelque part JavaScript, est le plus simple.

---

Deuxièmement, si vous ne pouvez pas le faire dans le script, vous pouvez utiliser l'ancre, mais dans , ne l'enveloppant, comme ceci:

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

Hiding CSS il:

.params { display: none; }

Et jQuery utiliser:

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

---

Troisièmement, utilisez attributs de données HTML5 , cela brisera les strictes XHTML validité, mais un excellent moyen d'avenir pour aller, ça va causer aucun problème dans les navigateurs actuels.

---

La dernière option (que je peux penser), utiliser le jQuery métadonnées plug-in ou le stockage ce que vous voulez.