jQuery div onclick hacer clic en un href dentro del div

Question

Tengo el siguiente código HTML:

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

para que sea un poco más atractivo para los navegadores compatibles con Javascript He añadido este jQuery (1.3.2):

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

Pero creo que entra en un ciclo infinito o algo así. Safari muestra esto:

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

¿Alguien puede ofrecer una solución o mejor?

Answer 1

El problema aquí es que a se encuentra dentro del tr. Ergo, cuando se activa el método a click(), el evento burbujea al tr que lo contiene, creando el bucle recursivo que mencionaste. En lugar de llamar al .find('a').click(), ambos a y tr usan el mismo método de clic.

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

Answer 2

Primero, me gustaría console.log($(this).find('a')) y asegúrese de que es el enlace apropiado. A continuación, creo que el evento click no es lo que desea en el elemento a. Creo que lo que desea es: var a = $(this).find('a'); if (a) document.location.href = a.attr('href');

Mi JavaScript es bastante débil, aunque:)

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

simplemente tratar de usar en lugar de bind('click')click() acceso directo, que trabajó para mí en casi mismo caso.

Answer 5

que tenían el mismo problema y lo resolvió con la adición de e.stopPropagation(); a la una de clic:

$(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

Esta es una respuesta bastante tarde, pero me pareció que esto sea una solución muy corto y simple:

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

Answer 7

mina era un elemento de la lista en un menú desplegable, así que quería que el evento siguiera burbujeando para que el menú desplegable se cerrara. esta es la solución que utilicé:

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