jQuery - Добавить событие клика в Div и перейти к первой найденной ссылке

Question

Я думаю, что слишком долго смотрел на эту функцию и просто застрял, пытаясь найти хороший чистый способ сделать это.

Это функция jQuery, которая добавляет событие щелчка к любому div с классом click CSS. При нажатии на div.click он перенаправляет пользователя на первую найденную ссылку.

function clickabledivs() {
    $('.click').each(
        function (intIndex) {
            $(this).bind("click", function(){
                window.location = $( "#"+$(this).attr('id')+" a:first-child" ).attr('href');
            });
        }
    );
}

Код просто работает, хотя я почти уверен, что есть более лучший способ сделать это, особенно используемый мной селектор: $( "#"+$(this).attr('id')+" a:first-child" ). Все выглядит долго и медленно. Есть идеи?

Пожалуйста, дайте мне знать, если вам нужно больше деталей. Спасибо!

PS: Я нашел несколько действительно хороших справочных материалов по jQuery из Project2k.de здесь: http://blog.projekt2k.de/2010/01/benchmarking-jquery-1-4/

Answer 1

В зависимости от того, сколько у вас есть этих div.click элементов, вы можете использовать делегирование событий для обработки этих кликов. Это означает использование единого обработчика событий для всех элементов div, которые имеют класс click. Затем внутри этого обработчика событий ваш обратный вызов действует на основании того, * * * * откуда произошло событие. Как это:

$('#div-click-parent').click(function (event)
{
    var $target = $(event.target); // the element that fired the original click event
    if ($target.is('div.click'))
    {
        window.location.href = $target.find('a').attr('href');
    }
});

Меньшее количество обработчиков событий означает лучшее масштабирование - больше div.click элементов не замедлит вашу обработку событий.

Answer 2

оптимизированное делегирование с jQuery 1.7 +

$('#div-click-parent').on('click', 'div.click', function () {
   window.location.href = $(this).find('a').attr('href');
});

Answer 3

Вместо того, чтобы связывать все клики при загрузке, почему бы не связать их по клику? Должно быть намного более оптимальным.

$(document).ready(function() {
   $('.click').click(function() {
        window.location = $(this).children('a:first').attr('href');
        return false;
    });
});

Answer 4

Я бы, наверное, сделал что-то вроде:

$('.click').click(function(e){
  window.location.href = $(this).find('a').attr('href');
});