jQuery：如何在保持XHTML有效性的同时，如何通过HTML元素上的事件元数据？

Question

我敢肯定，你们中很多人一次或一次遇到了这个困境：

我有一个块级的HTML元素，其中包含多个块级和内联级元素，例如

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

我只想将jQuery ajax（）事件附加到单击#AJAX（顶级元素）上，但是我需要通过一些参数到服务器端脚本。

我看到的一种可能的方法是简单地替换 div#ajax 和 a#ajax, ，这会让我添加类似的东西 href="param=value&this=that", ，但这会使页面无效：没有任何块级元素（<div>）内联元素内部（<a>).

另一种可能的方法是添加 rel 属性为 div#ajax, ，这也意味着忽略XHTML验证。

我不想去添加内联 onclick 要分割的事件，这有点太远了……而且，所有的孩子 div#ajax 例如 <span> 将是一个主要的皮塔饼。

您将如何处理？

谢谢！

Answer 1

在维持XHTML有效性的同时，有几种方法可以解决，或者至少在所有浏览器中保持全部功能：

第一个选项，将参数直接放在JavaScript中，这是最简单的。

---

第二，如果您不能在脚本中执行此操作，则可以使用锚点，但是 里面, ，不要像这样包装它：

<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隐藏它：

.params { display: none; }

并使用它：

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

---

第三，使用 HTML5数据属性, ，这将打破严格的XHTML有效性，但要走的一个很棒的未来方法，这将不会引起当前浏览器的问题。

---

最后选项（我能想到的），使用 jQuery元数据插件 或存储想要的东西。