jQuery: Как пройти метаданные события на HTML-элементы при сохранении действительности XHTML?

StackOverflow https://stackoverflow.com/questions/3137235

  •  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 плагин или хранить то, что вы хотите.

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top