クリック時のhrefタグの取得

Question

"navigation" divでクリックされた要素のhrefタグを取得しようとしています 現在のコードは、ナビゲーションdivでクリックした要素に関係なく毎回#BiblesandCommentariesを返します。

<div class="navigation"> 
     <ul> 
      <li><a href="#BiblesandCommentaries">الانجيل-تعليقات</a> </li> 
      <li><a href="#EnquirersLibrary">الاستفسارات</a> </li> 
      <li><a href="#NewBelievers">مؤمنون جدد</a> </li> 
      <li><a href="#ChristianLiving">حياة المسيحى</a> </li> 
      <li><a href="#FamilyLibrary">مكتبة الأسرة</a> </li> 
      <li><a href="#YoungAdultLibrary">مكتبة الشباب</a> </li> 
      <li><a href="#WorshipLibrary">مزامير وتراتيل</a> </li> 
      <li><a href="#BibleTeachings">التدريس</a> </li> 
      <li><a href="#Leadership">القيادة</a> </li> 
      <li><a href="#SchoolofChrist">مدرسة الإنجيل</a> </li> 
      <li><a href="#Dota">شاگرد سازی بصورت شنیدن</a></li> 
      <li><a href="#MinorityLanguages">فهم المسيح</a> </li> 
     </ul> 
    </div> 

jsのような.find().attr()を使用して

$('.navigation').click(function() { 
    test = $(this).find('a').attr('href'); 
    alert (test); 
}); 

Answer 1

HTMLは常に最初の1を取得します、あなたはこのようなaをターゲットに、あなたのclick機能するためのセレクタを変更する必要があります。

$('.navigation a').click(function(e) { 
    e.preventDefault(); //use this if you don't want to reload the page 
    var test = $(this).attr('href'); 
    alert (test); 
}); 

また、宣言する必要がありますあなたの変数。

EDIT OKコメンターが、私はちょうど彼のコードを修正しましたが、ここ屋に行く：

$('.navigation a').on("click",function(){ 
     alert($(this).attr('href')); 
}); 

EDITハハのコメンター、の知識をひけらかす取得してみましょう：

$("div.navigation").on("click", "a", function(e) { 
    e.preventDefault(); 
    alert ($(this).attr('href')); 
});​​​​ 

デフォルトを防止することなく、タグを操作すると、ページがリロードされます

EDIT：それ以上のステップを踏みたいですか？ jQueryを忘れる。ここではいくつかのvanilla JS

document.querySelector("div.navigation").onclick = function(e){ 
    if(e.target.href){ 
     e.preventDefault(); 
     alert(e.target.href); 
    } 
} 

Answer 2

.navigationは一つだけ（UL）であるのです。全体的にあなたがベストプラクティスのためにこれを試してみてください

$('.navigation a').click(function() { 
    var test = $(this).attr('href'); 
    alert (test); 
}); 

Answer 3

のようなものを試してください：あなたは、同じ要素に対して複数回DOMを解析する必要がない限り

$('div.navigation').on("click", "a", function() { 
    alert($(this).attr('href')); 
}); 

は、メモリ内の変数を設定しないようにしよう、覚えておいてください。また、できるだけ多くの深さをjQueryセレクタに与えてみてください。解析するDOMを少なくしてください。それが理にかなっていない場合は、このように考えてください。それは、クラス 'ナビゲーション'のdivタグのみを解析する必要がある場合、他のタグをすべて削除し、そのクラス属性のすべてのタグを解析するよりもはるかに時間がかかります。

たり、イベントをたどる可能性：上記を行うには

$('div.navigation').on("click", function(event) { 
    if(event.target.href){ alert(event.target.href); } 
}); 

理由は、同様に、メモリの目的です。ラッパーだけを見ている場合は、メモリ内にイベントリスナーが1つしかありません。 'a'タグ自体にイベントリスナーがある場合は、ラッパーのすべての 'a'タグに対してイベントリスナーをメモリに保持する必要があります。これは重くなる可能性があります...イメージページに読み込まれたすべての画像にGoogleがイベントリスナーを持っていたら想像してみてください。