jQuery: Как пройти метаданные события на HTML-элементы при сохранении действительности XHTML?
-
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
События для Divs, это слишком далеко ... Также, поворачивая всех детей div#ajax
в eg. <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; }
И jquery, используя его:
$("#ajax").click(function() {
$.ajax({
url: $(this).find(".params").attr("href");
success: function() {
//do something
}
});
});
В-третьих, используйте HTML5 Данные атрибуты, Это сломает строгую достоверность XHTML, но отличный будущий способ пойти, он не приведет к проблемам в текущих браузерах.
Последний вариант (что я могу думать), используйте jquery metadata плагин или хранить то, что вы хотите.