0

I have two links that have different structure.

<div id="content">    
 <a href="javascript:void(0)" data-uri="https://stackoverflow.com/questions/ask">

and

 <a href="javascript:void(0)" data-uri="https://stackoverflow.com/questions/ask">
  <img src="https://www.gravatar.com/avatar/084f45fb1ccb4bd208ad48dbffcd502f?s=48&d=identicon&r=PG">
 </a>
</div>

I have this function that should log data-uri by clicking <a> element.

var clickHandler = "click";

if ('ontouchstart' in document.documentElement) {
    clickHandler = "touchstart";
}

$(document).on(clickHandler, '#content a', function() {
        href = $(this).data("uri");
        console.log(href);
});

For some reason link with image just does not work. Nothing get logged.

PS. clickHandler variable is there adapt if page is viewed by mobile device that has touch feature.

Jaakko Uusitalo
  • 655
  • 1
  • 8
  • 21

2 Answers2

0

I think this should work

delete this portion

if ('ontouchstart' in document.documentElement) {
 clickHandler = "touchstart";
} 

and add this

$(document).on('touchstart click', 'a#content', function(event){

based on answer

How to bind 'touchstart' and 'click' events but not respond to both?

sumit sharma
  • 698
  • 5
  • 16
  • This almost works. Now I am getting href from both links, but the one without image is firing twice. Each click on first example logs twice. – Jaakko Uusitalo Nov 08 '17 at 08:56
0

Works fine for me.

You can go through this: http://jsfiddle.net/PpXz5/4/

The code:

$("#content a").on("click", function() {
        href = $(this).data("uri");
        console.log(href);
});
Pang
  • 9,564
  • 146
  • 81
  • 122
Sushant Bassi
  • 364
  • 3
  • 16