jQuery onclick не работает с href и img

Question

Я хочу отображать divs при нажатии на ссылку на ID.

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. С изображением в виде «ссылки» отображается пустая страница. Как я могу решить эту проблему?

наилучшими пожеланиями Саймон

Answer 1

Это происходит потому, что когда у вас есть изображение внутри якоря цель событие является img элементом при нажатии на него, и он не имеет никакого hash собственности. Попробуйте это, если я использую метод closest, чтобы найти ближайший элемент a от целевого элемента.

$('#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 где this будет указывать на элемент, на котором крепится событие.

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