jQuery:如何在保持XHTML有效性的同时,如何通过HTML元素上的事件元数据?
-
01-10-2019 - |
题
我敢肯定,你们中很多人一次或一次遇到了这个困境:
我有一个块级的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>
将是一个主要的皮塔饼。
您将如何处理?
谢谢!
解决方案
在维持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元数据插件 或存储想要的东西。
不隶属于 StackOverflow