のクリックアンカーには子があります

Question

こんにちは
まもなくカードのどこかをクリックするとアンカーのhrefを返すためにカードを1ブロックにしたいと思います。
問題が発生しました。カードの任意の場所をクリックすると、クリックしたアイテムが返されます。
コードに問題があります。

私の悪い言葉は残念です。ヘルプ

ため
おかげアンカーではなく、文書にイベントハンドラをバインド

$(document).bind('click', function(e) { 
 
    var ele = $(e.target); 
 
    if (ele.hasClass('itemLink')) { 
 
    // I want this part 
 
    e.preventDefault(); 
 
    console.log(ele.attr('href')); 
 
    } else { 
 
    console.log(ele.attr('class')); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="itemContainer" style="width: 200px;"> 
 
    <a class="itemLink" href="#"> 
 
    <div class="itemCard"> 
 
     <div class="itemHead"> 
 
     <img class="itemImage" src="image.png" style="width:200px; height:200px;"> 
 
     <h3 class="itemName">Item Name</h3> 
 
     </div> 
 
     <div class="itemDetails"> 
 
     <p class="itemDesc">item detail descriptins</p> 
 
     <p class="itemDesc">item detail descriptins</p> 
 
     <p class="itemDesc">item detail descriptins</p> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

Answer 1

これは、1つを含め、聞こえますそれは子供です。答え
ため

$(document).bind('click', function(e) { 
 
    var ele = $(e.target).closest('a.itemLink'); 
 
    if (ele.length) { 
 
    // the click was inside your anchor 
 
    e.preventDefault(); 
 
    console.log(ele.attr('href')); 
 
    } else { 
 
    // the click was not in your anchor 
 
    console.log('clicked not in anchor'); 
 
    } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="itemContainer" style="width: 200px;"> 
 
    <a class="itemLink" href="#"> 
 
    <div class="itemCard"> 
 
     <div class="itemHead"> 
 
     <img class="itemImage" src="image.png" style="width:200px; height:200px;"> 
 
     <h3 class="itemName">Item Name</h3> 
 
     </div> 
 
     <div class="itemDetails"> 
 
     <p class="itemDesc">item detail descriptins</p> 
 
     <p class="itemDesc">item detail descriptins</p> 
 
     <p class="itemDesc">item detail descriptins</p> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

Answer 2

。アンカーが動的に追加されている場合

$('a.itemLink').click(function(e) { 
 
    e.preventDefault(); 
 
    console.log($(this).attr('href')); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="itemContainer" style="width: 200px;"> 
 
    <a class="itemLink" href="#"> 
 
    <div class="itemCard"> 
 
     <div class="itemHead"> 
 
     <img class="itemImage" src="image.png" style="width:200px; height:200px;"> 
 
     <h3 class="itemName">Item Name</h3> 
 
     </div> 
 
     <div class="itemDetails"> 
 
     <p class="itemDesc">item detail descriptins</p> 
 
     <p class="itemDesc">item detail descriptins</p> 
 
     <p class="itemDesc">item detail descriptins</p> 
 
     </div> 
 
    </div> 
 
    </a> 
 
</div>

、委任を使用：あなたはaタグ内の任意の場所をクリックしたときに何かをしたいよう

$(document).on('click', 'a.itemLink', ...)