jQuery onclick이 href 및 img와 작동하지 않습니다.

Question

ID에 링크를 클릭하면 div를 표시하려고합니다.

jQuery를 :

$('#tab-bar a').on('click', function(e){ 

    e.preventDefault(); 
    var nextPage = $(e.target.hash); 
    page(nextPage); 
    $("#pages .current").removeClass("current"); 
    nextPage.addClass("current"); 
    }); 

HTML : 내가 대신 이미지의 텍스트를 사용하면 내가 원하는대로

<div id="pages"> 
    <div id="mainpage" class="current"> 
     <ul id="tab-bar"> 
    <li> 
    <a href="#mimik"><img src="img/mimik.jpg" alt="mimik"></img></a><br> 
    </li> 
     </ul> 
    </div> 

    <div id="mimik"> 
    <h2 style="color:red">Mimik</h2> 
    </div> 

가 작동합니다. h2가 표시됩니다. 이미지를 "링크"로 표시하면 빈 페이지가 표시됩니다. 어떻게이 문제를 해결할 수 있습니까?

안부 당신이 앵커 안에 이미지가있을 때 당신이 그것을 클릭하고 어떤 hash 속성이없는 경우 이벤트 대상이 img 요소이기 때문이다 사이먼

Answer 1

. 목표 요소에서 가장 가까운 a 요소를 찾으려면 closest 메서드를 사용하고있는 곳에서이 방법을 시도해보십시오. this 이벤트가 부착되어있는 요소를 가리 곳

$('#tab-bar a').on('click', function(e){ 
    e.preventDefault(); 
    var nextPage = $($(e.target).closest('a')[0].hash); 
    page(nextPage); 
    $("#pages .current").removeClass("current"); 
    nextPage.addClass("current"); 
}); 

또는 당신 this.hash를 사용할 수 있습니다.

$('#tab-bar a').on('click', function(e){ 
    e.preventDefault(); 
    var nextPage = $(this.hash); 
    page(nextPage); 
    $("#pages .current").removeClass("current"); 
    nextPage.addClass("current"); 
});