img 요소를 클릭하십시오.

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 

...하지만 이벤트가 실행되지 않습니다. 클릭 이벤트를 어떻게 감지합니까?

Answer 1

.click() 대신 .on("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>