Чтобы сделать зависящие от нажатия div, я делаю:
<div class="clickable" url="http://google.com">
blah blah
</div>
а затем
$("div.clickable").click(
function()
{
window.location = $(this).attr("url");
});
Я не знаю, лучший ли это, но он отлично работает со мной, за исключением одной проблемы: Если div содержит элемент с возможностью нажатия, например, < a href= "..." > , и пользователь нажимает на гиперссылку, как гиперссылка, так и div's-clickable называются
Это особенно проблема, когда тег привязки ссылается на функцию javascript AJAX, которая выполняет функцию AJAX. И следует ссылку в атрибуте url div.
В любом случае вокруг этого?
Если вы вернете "ложь" из вашей функции, это остановит событие пузырька, так что только ваш первый обработчик события будет запущен (т.е. ваш якорь не увидит клик).
$("div.clickable").click(
function()
{
window.location = $(this).attr("url");
return false;
});
См. event.preventDefault() vs. return false для получения подробной информации о возврате false vs. preventDefault.
$("div.clickable").click(
function(event)
{
window.location = $(this).attr("url");
event.preventDefault();
});
Использование настраиваемого атрибута url делает HTML недействительным. Хотя это не может быть большой проблемой, данные примеры не доступны. Не для навигации по клавиатуре, а не в случаях, когда JavaScript выключен (или заблокирован каким-либо другим script). Даже Google не найдет страницу, расположенную по указанному URL, а не по этому маршруту.
Это довольно просто сделать доступным. Просто убедитесь, что в div есть регулярная ссылка, указывающая на URL. Используя JavaScript/jQuery, вы добавляете onclick в div, который перенаправляет на местоположение, указанное атрибутом link href. Теперь, когда JavaScript не работает, ссылка по-прежнему работает, и даже при использовании клавиатуры для навигации (даже если вам не нужны настраиваемые атрибуты, поэтому ваш HTML-код может быть действительным) даже может уловить фокус.
Я написал плагин jQuery некоторое время назад, который делает это. Он также добавляет имена классов в div (или любой другой элемент, который вы хотите сделать кликабельным) и ссылку, чтобы вы могли изменить их внешний вид с помощью CSS, когда div действительно доступен для клика. Он даже добавляет имена классов, которые можно использовать для указания стилей наведения и фокусировки.
Все, что вам нужно сделать, это указать элемент (ы), который вы хотите сделать кликабельным, и вызвать их метод clickable(): в вашем случае это будет $("div.clickable).clickable();
Для загрузки + документации см. страницу плагина: jQuery: clickable — jLix
Я знаю, что если бы вы изменили это на href, вы бы сделали:
$("a#link1").click(function(event) {
event.preventDefault();
$('div.link1').show();
//whatever else you want to do
});
поэтому, если вы хотите сохранить его с помощью div, я бы попробовал
$("div.clickable").click(function(event) {
event.preventDefault();
window.location = $(this).attr("url");
});
<div class="info">
<h2>Takvim</h2>
<a href="item-list.php"> Click Me !</a>
</div>
$(document).delegate("div.info", "click", function() {
window.location = $(this).find("a").attr("href");
});