hammer.js kills a href on tap event

Question

i´m running into a problem with hammer an it´s tap event. I´m using this script to display an hidden div on tap event. Inside of this div construct, i have an a tag with an link, but it break apart, and i don´t know why.

<div id="_news_8_" class="news_latest small-12 medium-6 columns">
  <div class="news-info">
    <div class="news-info-content table tap-object">
      <div class="table-cell align-middle">
        <h2>Headline</h2>
        <h6>Subheadline</h6>
        <p class="more"><a href="link-to.html">&gt; Detail <span class="invisible">Text</span></a></p>
      </div>
    </div>
  </div>
  <div id="_slidesnews_8_" class="_bstretch_">
    ...
  </div>
</div>

and the script

$tapObject = $('.tap-object');
[].slice.call($tapObject).forEach(function(element) {
  hammertap = new Hammer(element);
  hammertap.on('tap', function(event) {
    if (event.target !== activeTap) {
      if (activeTap !== undefined) {
        $(activeTap).removeClass('on');
      }
      $(event.target).addClass('on');
    }
    activeTap = event.target;
  });
});

so what´s going wrong here? here´s a live demo: http://holmgallery.com/index.php/collection.html Down under the Header Gallery, tap on one of the objects

Answer 1

Ok, Got it - so using the jQuery Wrapper Plugin, give´s me more Control over Delegation. Now the a.href work´s as it should.

var $rootObject = $('.news_latest');
[].slice.call($rootObject).forEach(function(element) {
  hammertap = new Hammer(element);
  $(element).hammer({domEvents:true}).on("tap", '.tap-object', function(event) {
    if (event.currentTarget !== lastTap) {
      if (lastTap !== undefined) {
        $(lastTap).removeClass('on');
      }
      $(event.currentTarget).addClass('on');
      lastTap = event.currentTarget;
    }
  });
});