применить клик к родителю тега (jquery)

Question

У меня есть много ссылок типа

<li><a href="google.com">LINKY</a></li>

на моем сайте, и я предпочитаю, чтобы весь Li был кликабельным, а не просто текстом.Мы подумали о том, чтобы применить какой-нибудь хороший jquery, который будет выслеживать любой $ ('li a') и сделать так, чтобы при нажатии на <li> он вызывал клик на <a>

        $('li a').each(function(index) {
            $(this).parent().bind('click', function() {
                $(this).children().click();
            });
        });

Это не работает, но я не уверен, почему?есть идеи?

Answer 1

Не лучше ли растянуть якорь до размера LI?

li > a {
   display: block;
   width: 100%;
   /* optionally height: some height */
}

Answer 2

Гораздо проще, если вы просто привязываете событие click к элементу <li>.

Пузырьки событий гарантируют, что они запускаются и при нажатии <a>.

Вот пример: http://jsfiddle.net/MB9Fm/

$('li:has( > a)').click(function() {
     alert('I was clicked');
     return false;
});

---

РЕДАКТИРОВАТЬ:

Возможно, я неправильно понял намерение для click обработчик.Если бы все, что вы хотели сделать, это посетить href, я бы согласился с возможными решениями CSS.В противном случае, используя js, сделайте что-то вроде этого:

http://jsfiddle.net/nkGga/

$('li:has( > a)').click(function() {
     window.location = $(this).children('a').attr('href');
});

То, как вы вызываете .click() в своем комментарии, вызовет бесконечный цикл, а я неуверен, что в любом случае это приведет вас к месту назначения.

Answer 3

Вызов click () по ссылке не выполняет действия по умолчанию (переход к адресу). Вы можете вручную сделать обработчик кликов:

$('li a').each(function(index) {
            $(this).parent().bind('click', function() {
                window.location = $(this).children().attr('href');
            });
        });

Answer 4

Попробуйте это:

$('li:has(a)').each(function() {
    $(this).bind('click', function(index){
        $(this).find('a').trigger('click');
    });
});

Answer 5

Посмотрите на функциональность .delegate(), добавленную в 1.4.2, она больше соответствует вашим желаниям.

$("li").delegate("a", "click", function(event){
  //do what you want here
  return false; //prevent default action and prevent bubbling up
});