Member Avatar for FarrisFahad

I have jquery for my mobile website, but the problem is with iPhones. The touch event, or onclick event does not work on iPhones. It works on Android.

Have anyone encountered the same problem? How can I fix this? Are there any work arounds?

Also I am a bit confused about jQuery Mobile. What is the purpose of this framework other than the swipe events?

Should I add both jQuery and jQuery Mobile for my mobile site?

  • 5 Contributors
  • 6 Replies
  • 1K Views
  • 17 Hours Discussion Span
  • Latest Post Latest Post by FarrisFahad
Member Avatar for gentlemedia

Are you sure that it has to do with jQuery Mobile? I mean it's a through tested framework and I can't imagine the touch event doesn't work on iOS. Also perhaps it's better to ask at the jQuery Mobile forum.
https://forum.jquery.com/jquery-mobile
And onClick not working on IOS is also hard to believe. I think something else is causing your issue.

Edited by gentlemedia
Member Avatar for Dani

I completely swear by jQuery. I love it. I also love that I randomly stumbled upon the fact that the founder follows me on Twitter, but that's another story entirely. That being said, I tried jQuery Mobile a couple of years ago, and found it to be the most buggy POS I've ever come across. It never made it into any of my production code. I, also, found it to not offer much more than swipe events. There are alternative frameworks out there for iOS.

Member Avatar for FarrisFahad

I haven't used jQuery Mobile for clicks rather jQuery. There might be something wrong with my code, but it does work on Android.
I use an old version of jQuery, does that matter. Is mobile clicking supported for old versions of jQuery?
I currently use jQuery "jquery-1.12.0.min.js". Should I upgrade?

Member Avatar for jkon

For the mobile / tablet version (adaptive and then responsive front end architecture) we use jquery.mobile.just-touch.js allong with jQuery. Its never a good idea to use the onclick event of the dom element (we don't use it either in the desktop version) but the method provided by jQuery. Because we don't want to remember all the time those differences in UI between desktop and mobile / tablet we have create an extension to make our life easier and always refer to that as onClick on the jQuery object e.g:

For desktop version:

var jExtend = new JExtend();
function JExtend()
{
    var _this = this;
    var $ = jQuery;

    function init()
    {
        $.fn.extend(_this);
    }

        this.onClick = function(f)
    {
        if (f == undefined)
        {
            $(this).click();
        }
        else
        {
            $(this).click(f);
        }
    };
    init();
}

And the same for mobile / tablet version: 

    var jExtend = new JExtend();
    function JExtend()
    {
        var _this = this;
        var $ = jQuery;

        function init()
        {
            $.fn.extend(_this);
        }

        this.onClick = function(f)
        {
            if (f == undefined)
            {
                $(this).trigger("vclick");
            }
            else
            {
                $(this).on("vclick",f);
            }
        };
        init();
    }

Of course in real life this is a bit different and has more than just onClick

Edited by jkon
Member Avatar for pty

These days, just build responsive.

jQuery Mobile has always been a kludge, I wish it didn't have the jQuery name because that made people think it was actually good. It's not, avoid it.

Member Avatar for FarrisFahad

Okay guys thank you for your help :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.