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

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

0 голосов
/ 29 июня 2010

Я уверен, что многие из вас сталкивались с этой дилеммой в то или иное время:

У меня есть элемент 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, это слишком далеко ... Кроме того, превращение всех дочерних элементов div#ajax в например. <span> будет большой пита.

Как бы вы справились с этим?

Спасибо!

1 Ответ

2 голосов
/ 29 июня 2010

Есть несколько способов сделать это, поддерживая валидность 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 метаданных или сохраняйте то, что вы хотите.

...