CODEWITHSUNDEEP
androidjqueryiosmobileresponsive-design
Nikolaos Vassos
Nikolaos Vassos

Reputation: 246

Jquery click event issue on physical mobile phones

I have that piece of code which is working for all desktop browsers, including re-sized ones. but when I load the page in an actual mobile phone or for example the Chrome Device Emulator on Dev Tools, the click event is not firing up. Any help appreciated.

Code found below:

jQuery(document).on('click', 'area',  function() {
    event.preventDefault();
    var id = jQuery(this).attr('title');
    var iframe = '<iframe id="fploaderframe" frameborder="0" src="'+id+'" allowfullscreen></iframe>';
    jQuery("#heroloader").html(iframe);
    jQuery("#heroloader").fadeIn();
    jQuery(".closethisfp").fadeIn();
    jQuery('.closethisfp').attr('href', '#');
});

I just stumbled upon Hammer js. Would the tap event be able to help out?

Upvotes: 0

Views: 118

Answers (2)

Andrew Zheng
Andrew Zheng

Reputation: 11

May be you can try add touchstart event. like this:

jQuery(document).on('click touchstart', 'area',  function(event) {
 ...
}

Upvotes: 1

andyrandy
andyrandy

Reputation: 73984

First of all, add the parameter in the function call, to make event.preventDefault() work:

jQuery(document).on('click', 'area',  function(event) {
    ...
}

If that does not work, try it like this:

$('area').on('click', function() {
    console.log('test');
});

...or like this:

$('area').click(function() {
    console.log('test');
});

You can also use alert instead of console.log on mobile phones, just to check out if the callback gets called.

If that still does not work, try using a class as selector:

$('.url-area').click(function() {
    console.log('test');
});

Upvotes: 1

Related Questions