Jquery - boucle infinie

Question

J'ai une page Web qui a un bouton placé à l'intérieur d'un div. Ce que je veux réaliser, c'est que lorsque les utilisateurs cliquent sur la div, cela déclenchera le clic sur le bouton. Le code est quelque chose comme:

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

Une fois exécuté (cliquez sur le div), il jetterait javascript erreur « trop récursion ». Il est logique pourquoi sa boucle infinie là-bas, mais je ne suis pas sûr de savoir quelle est la bonne façon d'accomplir cette action? (plz ne me demande pas pourquoi je le veux de cette façon, ce n'est pas mon code!)

merci pour votre aide!

Answer 1

Arrêtez event bubbling dans le gestionnaire d'événements de clic de bouton.

Utilisez e.stopPropagation()

Si vous utilisez jquery ensuite faire tous les gestionnaires d'événements de manière jquery. Ainsi, le bouton clic sera

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

Donc, la chose sera

$(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(); 
}); 

Son travail pour moi