javascript - My anchor tags are not working. -

the issue says in title, clicking on image wrapped anchor tag doesnt work.

here example of on grid list item:

<li class="grid-list-item">             <h3 class="grid-trail-name">marshall canyon</h3><span class="grid-loc">mt baldy, california</span>             <div class="grid-overlay">                 <span class="grid-close">close</span>                 <div class="grid-trail">                     <div class="open">                         <div class="info-flex info">                             <div class="info-sum info-flex-child">                                 <h3 class="info-sum-header">marshall canyon...</h3>                                 <p class="info-sum-text">lorem ipsum dolor sit amet, consectetur adipiscing elit. pellentesque imperdiet massa sed augue posuere aliquet. sed ac eros convallis, porttitor tellus in, blandit lacus. suspendisse mollis quis turpis ac tempor. pellentesque imperdiet massa sed augue posuere aliquet. sed ac eros convallis, porttitor tellus in, blandit lacus. suspendisse mollis quis turpis ac tempor. </p>                             </div>                             <div class="info-map info-flex-child">                                 <a href="http://www.ramblr.com/web/mymap/trip/81548/154499" target="_blank" ><img src="http://www.ramblr.com/media/photo/map/20150714/0000154499_big_english.jpg?q=1461036407851" data-item="map_img" data-src="http://www.ramblr.com/media/photo/map/20150720/0000158962_big_english.jpg"  class="map"> </a>                             </div>                             <div class="info-graph info-flex-child">                                 <a href="http://www.ramblr.com/web/mymap/trip/81548/154499" target="_blank" ><img src="http://www.ramblr.com/media/photo/chart/20150714/0000154499_1_english.jpg?q=1461036467654" data-item="chart_img" data-src="http://www.ramblr.com/media/photo/chart/20150720/0000158962_1_english.jpg" class="graph"></a>                             </div>                             <div class="info-pic-section info-flex-child">                                 <img src="images/marshall.jpg" alt="" class="info-pic">                             </div>                         </div><!-- grid info -->                     </div><!-- open -->                 </div><!-- grid trail -->             </div><!-- grid overlay -->         </li><!-- grid item --> 

grid-overlay remains hidden until user clicks on grid item. once clicked info section displayed. within info section there map , graph should open new anchor tag once clicked.

my guess script used achieve effect causing issue boxgrid.js . find github repo here , site on surge here.

the problem <div class="grid-overlay"> content resides in dom. currently, there 12 of them, 1 inside each list item. you'll need these overlays live outside of list items.

check out following gif.

i click on 1 of starting list items , overlay comes up. usual, clicking on map anchor doesn't work. drag <div class="grid-overlay"> dom outside of list item , drop right before </body>. styles little messed (needs background color applied), point map anchor link works.

one solution move <div class="grid-overlay"> elements before </body> , add data attribute on each one, associating hiking destination. example:

<div class="grid-overlay" data-belongs-to="potato mountain">

then, associate destination clicked list item:

<li class="grid-list-item" data-location="potato mountain">

at point, you'd have mess original script little. you'd want change:

$overlay = $item.children( 'div.grid-overlay' )

because <div class="grid-overlay"> elements no longer reside children inside of each $item.

good luck!