1

I have a rotator that contains text and buttons. The buttons (anchor tags) do not work for mobile devices. I have read similar posts, and the solutions to their questions did not work for me. I made sure my html was valid, and without errors. I also inserted the following jQuery, but was unsuccessful. There is a hover effect on the button, and when tapped on a mobile device the hover effect occurs. I'm assuming there is some kind of conflict between the hover and click, but I'm not sure how to 'override' the hover?? 

$(function () {    
    $('a').on('click touchend', function() { 
        var link = $(this).attr('href');   
        window.open(link,'_blank'); // opens in new window as requested 

        return false; // prevent anchor click    
    });    
});

This script is working correctly, but still does not work for mobile devices on my page.

PS I am not using jQuery Mobile, and would like to avoid using it if possible.

EricBellDesigns
  • 893
  • 1
  • 7
  • 26
  • 2
    http://stackoverflow.com/questions/2427447/does-css-hover-work-on-mobile-devices – Derple Apr 18 '15 at 19:18
  • Thank you @Stuart Wickenden. I apologize for not having found that on my own. I appreciate the help. – EricBellDesigns Apr 18 '15 at 20:42
  • What happens when you leave out the click? It doesn't seem to be needed anyway. There should be no reason for that touchend to not trigger the link. I think a click is not a separate event on mobile but a touchstart-touchend chain. Maybe the clue is in that, I would surely like to get to the bottom of it in any case. Showing the HTML or a fiddle here as well could be helpful. From the feedback I got, this should work (click a link and look near bottom of the script) : http://codepen.io/Shikkediel/pen/LEyYpp?editors=001. – Shikkediel Apr 18 '15 at 21:08
  • Right, it's actually a conflict with the hover that prevents the click from happening. I believe the first comment is the solution I'm looking for. I just need client approval to move forward with removing the hover on that element in order for it to work. – EricBellDesigns Apr 18 '15 at 22:13
  • 1
    Take a look to this answer: http://stackoverflow.com/questions/8291517/disable-hover-effects-on-mobile-browsers Hope it helps. – Duver Apr 19 '15 at 03:48

0 Answers0