jQuery - 特定のDIVでリンクがクリックされたかどうかを確認するにはどうすればよいですか？ HTMLコードで

Question

私のページが含まれています：jQueryので

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

を、私は、ユーザーがページ内の任意のリンクをクリックしたかどうかを確認したい場合、私はこのコードを使用：

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

    // do something 

}); 

にはどうすれば場合機能を開始することができますユーザーは特定のdiv内のリンクのみをクリックしましたか？私は、 "main_menu"と "second_menu"という名前のdiv IDの中でユーザーがリンクをクリックしただけで、 "menu_outside"ではリンクがクリックされないと起動する関数を持っていたいと思います。あなたがのために同じアクションを実行したくない場合は

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

：

Answer 1

正確にあなたが何をしたいのかに応じて、descendant^[docs]とmultiple^[docs]セレクタを使用して、リンクだけにイベントハンドラをバインドすることができます両方とも、イベントハンドラを個別にバインドする必要があります。

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

しかし、それは追加のオーバーヘッドが導入されています

あなたもリンクがclosest^[docs]で、これらの要素のいずれかの子孫であるかどうかを動的にチェックすることができます。

Answer 2

これを使用してdivとahrefを選択します。

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