JQuery Div OnClick, чтобы щелкнуть HREF внутри DIV

Question

У меня есть следующий HTML:

<table class="products"> 
    <tr> 
    <td>Product description probably goes here</td> 
    <td><a href="#">more information</a></td> 
    </tr> 
</table> 

Чтобы сделать это немного сексуальнее для Javascript с поддержкой браузеров я добавил эту JQuery (1.3.2):

$(document).ready(function(){ 
    $('table.products tr').click(function(){ 
    $(this).find('a').click(); 
    return false; 
    }); 
}); 

Но я думаю, что он попадает в бесконечный цикл или что-то в этом роде. Safari показывает это:

RangeError: Maximum call stack size exceeded. jquery.min.js:12

Может ли кто-нибудь предложить обходной путь или лучший способ?

Answer 1

Проблема в том, что a лежит внутри tr. Ergo, когда запускается метод click(), событие пузырится до tr, содержащего его, создавая рекурсивный цикл, который вы упомянули. Вместо того, чтобы звонить .find('a').click(), используйте как a, так и tr, используя тот же метод.

$('tr, a').click(function(){ 
    //dostuff 
    return false; 
}); 

Answer 2

Во-первых, я бы console.log($(this).find('a')) и убедился, что это подходящая ссылка. Далее, я считаю, что событие click не является тем, что вы хотите на элементе a. Я думаю, что вы просто хотите: var a = $(this).find('a'); if (a) document.location.href = a.attr('href');

Мой JavaScript довольно слаб, хотя:)

Answer 3

$(document).ready(function(){ 
    $('table.products tr').click(function(e){ 
    e.stoPropagation(); // for stop the click action (event) 
    $(this).find('a').click(); 
    return false; 
    }); 
}); 

Answer 4

Просто попробуйте использовать bind('click') вместо click() ярлыка, он работал для меня почти такой же случай.

Answer 5

У меня была такая же проблема, и я решил его с добавлением e.stopPropagation(); к а по щелчку:

$(document).ready(function() { 
    $('table.products tr').bind('click', function() { 
    $(this).find('a').click(); 
    return false; 
    }); 

    $('table.products tr a').bind('click', function(e) { 
    e.stopPropagation(); 
    }); 
}); 

Answer 6

Это довольно поздно ответ, но я обнаружил, что это будет очень коротким и простым решением:

$('ul li').bind('click', function() { 
    location = $(this).find('a').attr('href'); 
}); 

Answer 7

mine был элементом списка в выпадающем списке, поэтому я хотел, чтобы событие продолжало пузыряться, поэтому выпадающее меню будет закрыто. это решение, которое я использовал:

$('div#outer').click(function (e) { 
    if (e.target == e.currentTarget) // prevents bubbled events from triggering 
     $($(e.currentTarget).children()[0]).trigger('click'); 
});