Detect click on img element

Question

<div class="portfolio-item"> 
<div class="hover-bg"> 
    <a href="#"> 
    <div class="hover-text"> 
    <h4>Logo Design</h4> 
    <small>Branding</small> 
    <div class="clearfix"></div> 
    <i class="fa fa-plus"></i> 
    </div> 
    <img src="01.jpg" class="img-responsive ng-isolate-scope"> 
    </a> 
    </div> 
</div> 
</div> 

Я пытаюсь обнаружить клики на элементе <img/>. У меня есть следующий слушатель:

$('img').addEventListener 'click', ((event) -> 
    console.log event 
), false 

... но событие не срабатывает. Как я могу обнаружить событие click?

Answer 1

Я предлагаю вам использовать .on("click") вместо .click().

$('img').on("click", function() { 
 
    console.log("image clicked"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="portfolio-item"> 
 
    <div class="hover-bg"> 
 
    <a href="#"> 
 
     <div class="hover-text"> 
 
     <h4>Logo Design</h4> 
 
     <small>Branding</small> 
 
     <div class="clearfix"></div> 
 
     <i class="fa fa-plus"></i> 
 
     </div> 
 
     <img src="01.jpg" class="img-responsive ng-isolate-scope"> 
 
    </a> 
 
    </div> 
 
</div>

Answer 2

Вы можете использовать JQuery нажмите событие следующим образом:.

$(document).ready(function(){ 
 
    $("img").click(function(){ 
 
     alert("The image was clicked."); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script> 
 
<div class="portfolio-item"> 
 
<div class="hover-bg"> 
 
    <a href="#"> 
 
    <div class="hover-text"> 
 
    <h4>Logo Design</h4> 
 
    <small>Branding</small> 
 
    <div class="clearfix"></div> 
 
    <i class="fa fa-plus"></i> 
 
    </div> 
 
    <img src="http://placehold.it/140x100" class="img-responsive ng-isolate-scope"> 
 
    </a> 
 
    </div> 
 
</div> 
 
</div>