auf Klick Anker hat ein Kind

Question

Hallo
in Kürze möchte ich die Karte als einen Block, um die href des Ankers, wenn Sie auf eine beliebige Stelle auf der Karte.
das Problem jetzt, wenn ich auf einen beliebigen Ort der Karte klicken Sie den Artikel, den ich geklickt habe.
und der Code zeigt das Problem.

tut mir leid für meine schlechte Sprache.
Dank für Hilfe

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

Es klingt wie Sie etwas tun wollen, wenn Sie irgendwo innerhalb des Tags a klicken, einschließlich auf einer von seinen Kindern. Dies sollte funktionieren:

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

Bind Ereignishandler mit dem Anker, nicht das Dokument.

$('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>

Wenn die Anker dynamisch hinzugefügt werden, verwenden Delegation:

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