jQuery - Cách kiểm tra xem có liên kết nào được nhấp vào một DIV cụ thể không?

Question

Trong HTML code trang của tôi chứa:

<div id="main_menu"> 
    <a href="#" id="login">Link1</a> 
    <a href="#" id="logout">Link2</a> 
</div> 
<div id="second_menu"> 
    <a href="#" id="information">Link info</a> 
    <a href="#" id="profile">My profile</a> 
</div> 
<div id="menu_oustide"><a href="#" id="something">Link1</a></div> 

Trong jQuery nếu tôi muốn kiểm tra xem người dùng nhấp bất kỳ liên kết trong trang tôi sử dụng mã này:

$('a').click(function() { 

    // do something 

}); 

Làm thế nào tôi có thể bắt đầu một hàm nếu người dùng chỉ nhấp vào các liên kết trong div cụ thể? Tôi muốn có một chức năng bắt đầu nếu người dùng nhấp vào bất kỳ liên kết nào trong div ID có tên "main_menu" AND "second_menu", nhưng không phải trong "menu_outside".

Answer 1

Tùy thuộc vào chính xác những gì bạn muốn làm, bạn có thể ràng buộc xử lý sự kiện để chỉ các liên kết này, bằng cách sử dụng descendant^[docs] và multiple^[docs] selectors:

$('#main_menu a, #second_menu a').click(function() { 
    // link inside #main_menu or #second_menu 
}); 

Nếu bạn không muốn thực hiện hành động tương tự cho cả hai, bạn phải liên kết trình xử lý sự kiện riêng lẻ.

Bạn thể cũng kiểm tra tự động cho dù liên kết là một hậu duệ của bất kỳ của các yếu tố, với closest^[docs]:

$('a').click(function() { 
    if($(this).closest("#main_menu").length) { 
     // inside #main_menu 
    } 
    if($(this).closest("#second_menu").length) { 
     // inside #second_menu 
    } 
    //... 
}); 

Nhưng đó giới thiệu một overhead bổ sung.

Answer 2

sử dụng tùy chọn này để chọn div và ahref bạn muốn.

$('#second_menu a').click(function(){ 
    // This will select the a href's only in the second menu. 
    // basically, in div id "#second_menu" select all "a" elements. 
});