jQuery - ¿Cómo verificar si se hizo clic en algún enlace en un DIV específico?

Question

En el código HTML mi página contiene:

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

En jQuery si quiere comprobar si el usuario hace clic en cualquier enlace en la página que utilizo este código:

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

    // do something 

}); 

¿Cómo puedo iniciar una función si el usuario hizo clic solo en enlaces en div específico? Me gustaría tener una función que se inicie si un usuario hace clic en cualquier enlace solo en el ID del div llamado "main_menu" Y "second_menu", pero no en "menu_outside".

Answer 1

Dependiendo de qué es exactamente lo que quiere hacer, puede enlazar el controlador de eventos a sólo aquellos enlaces, utilizando los descendant^[docs] y multiple^[docs] selectores:

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

Si no desea llevar a cabo la misma acción para ambos, debe vincular el controlador de eventos individualmente.

Usted podría también comprueba dinámicamente si el enlace es un descendiente de cualquiera de estos elementos, con closest^[docs]:

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

Pero eso introduce una sobrecarga adicional.

Answer 2

use esto para seleccionar el div y el tiempo que desee.

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