Jquery - bucle infinito

Question

Tengo una página web que tiene un botón dentro de un div. Lo que quiero lograr es que cuando los usuarios hagan clic en el div, se active el botón dentro de clic. El código es algo así como:

<div id='main'>  
<input id="button" type="button" onclick="javascript:dosomething();" value="submit" /> 
</div> 


<script type="text/javascript"> 
    $(function(){ 
    $('#main').bind('click', function(){ 
     $('#button').trigger('click'); 
    }) 
    }) 
</script> 

Cuando se ejecuta (haga clic en el div), arrojaría el error de javascript "demasiada recursividad". ¿Tiene sentido por qué su ciclo infinito existe pero no estoy seguro de cuál es la forma correcta de lograr esta acción? (por favor, no me preguntes por qué quiero que sea así, no es mi código!)

gracias por tu amable ayuda!

Answer 1

Parar event bubbling dentro del botón clic en controlador de eventos.

Uso e.stopPropagation()

Si está utilizando jQuery luego hacer todos los controladores de eventos en forma jQuery. Por lo que el clic de botón será

$('#button').click(function(e){ 
    doSomething(); 
    e.stopPropagation(); 
}); 

Así que todo habrá

$(function(){ 
    $('#main').bind('click', function(){ 
     $('#button').trigger('click'); 
    }); 

    $('#button').click(function(e){ 
     doSomething(); 
     e.stopPropagation(); 
    }); 

}); 

Answer 2

$("#main").on('click', function (e) { 
    e.stopPropagation(); 
    $("#button")[0].click(); 
}); 

Su trabajo para mí