Jquery - vòng lặp vô hạn

Question

Tôi có trang web có nút được đặt bên trong div. Điều tôi muốn đạt được là khi người dùng nhấp vào div, nó sẽ kích hoạt nút bên trong được nhấp. Mã này giống như sau:

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

Khi được thực hiện (nhấp vào div), nó sẽ ném lỗi javascript "quá nhiều đệ quy". Nó có lý do tại sao vòng lặp vô hạn của nó ở đó nhưng tôi không chắc chắn cách đúng để đạt được hành động này là gì? (plz không hỏi tôi tại sao tôi muốn nó theo cách đó, nó không phải mã của tôi!)

cảm ơn sự giúp đỡ tốt bụng của bạn!

Answer 1

Dừng event bubbling bên trong trình xử lý sự kiện nhấp vào nút.

Sử dụng e.stopPropagation()

Nếu bạn đang sử dụng jquery sau đó làm cho tất cả xử lý sự kiện trong jquery cách. Vì vậy, các nút bấm sẽ

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

Vì vậy, toàn bộ điều sẽ

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

công việc của nó đối với tôi