jQuery iPhone / ios7 click event vs touch

Question

I have a project and its driving me insane, I have code to do geolocation/directions and it works amazing on everthing BUT ios7 and I have done heaps of research and I understand that its an issue with the .click event, my code is below.

$(document).ready(function () {
    var startingLocation;
    var destination = "20 Papanui Rd, Christchurch Central, Christchurch 8011, New Zealand"; // replace this with any destination
    $('.get-directions').click(function (e) {
        e.preventDefault();

        // check if browser supports geolocation
        if (navigator.geolocation) {
            // get user's current position
            navigator.geolocation.getCurrentPosition(function (position) {
                // get latitude and longitude
                var latitude = position.coords.latitude;
                var longitude = position.coords.longitude;
                startingLocation = latitude + "," + longitude;

                // send starting location and destination to goToGoogleMaps function
                goToGoogleMaps(startingLocation, destination);
            });
        }

        // fallback for browsers without geolocation
        else {
            // get manually entered postcode
            startingLocation = $('.manual-location').val();

            // if user has entered a starting location, send starting location and destination to goToGoogleMaps function
            if (startingLocation != '') {
                goToGoogleMaps(startingLocation, destination);
            }
                // else fade in the manual postcode field
            else {
                $('.no-geolocation').fadeIn();
            }
        }

        // go to Google Maps function - takes a starting location and destination and sends the query to Google Maps
        function goToGoogleMaps(startingLocation, destination) {
            window.location = "https://maps.google.com/maps?saddr=" + startingLocation + "&daddr=" + destination;
        }
    });
});

HTML:

<!--#container -->
<div id="mapcontainer">
    <div class="no-geolocation">
        <p class="warning">Your browser does not support Geolocation. Please enter your  postcode and click the button again.</p>
        <input type="text" placeholder="Enter postcode or address" class="manual-location">
    </div>
    <a href="#" class="get-directions">Give me directions</a>
</div>
<!-- /#container -->

Now I had a play with Touche.

<script type='text/javascript' src="files/scripts/touche.min.js"></script>
<script>
$(document).ready(function() {
    $('.get-directions').on('click', handleClicks);
});
</script>

And all I got was an error handleClicks is not defined and a couple of other hacky scripts with no luck and i'm at my end of technical ability to fix the issue.

Hi! I suppose the function `handleClicks` is defined in `touche.min.js`. Is the JS script loaded correctly? — Littm, Feb 18 '14 at 02:57
Thanks for your response, the site is using jquery-1.11.0.min.js which is working fine with an image slider so I know it's there and working. — webmonkey237, Feb 18 '14 at 02:59
I don't think so... huuum... do you have a link to js script `touche.min.js`? So that I could try to recreate you issue. — Littm, Feb 18 '14 at 03:09
http://smithjonesresponsive.cchifirm.com.au/files/scripts/touche.min.js and the page itself is: http://smithjonesresponsive.cchifirm.com.au/contact_us/location_map — webmonkey237, Feb 18 '14 at 03:16
Ok I think I get it... XD `handleClicks` is a function you have to define then your library `touche.min.js` will simulate your function as being part of a touch event instead of a click event. — Littm, Feb 18 '14 at 03:29
So, you simply need to define this function :). What do you want to do when a user clicks on the button? — Littm, Feb 18 '14 at 03:29
let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/47713/discussion-between-littm-and-webmonkey237) — Littm, Feb 18 '14 at 03:32
When you tap the button on mobile devices it sends you to Google maps using geolocations and gives you the directions etc, this works on all mobile devices, android, windows old iphone ios but the latest ios7 has an issue "The problem is iPhones dont raise click events. They raise "touch" events." taken from http://stackoverflow.com/questions/3705937/document-click-not-working-correctly-on-iphone-jquery and it wont fire the button. — webmonkey237, Feb 18 '14 at 03:35

score 0 · Answer 1 · answered Feb 18 '14 at 03:10

I don't saw how your files tree, and how you include files, and cuz of it:

Try check this function, do it really works correctly. I mean, do something like this:

<script type='text/javascript' src="files/scripts/touche.min.js"></script>
<script>
handleClicks();
$(document).ready(function() {
    $('.get-directions').on('click', handleClicks);
});
</script>

And put in handleClicks function alert('something') It will make us sure about function works correctly, there no conflicts and file has been included successfully

Better, attach you touche.min.js and ppls will can try to recreate your issue

score 0 · Answer 2 · answered Feb 18 '14 at 03:32

0

you could try fastbutton library it worked for me

answered Feb 18 '14 at 03:32

Ahmad Anas

113
8

score 0 · Answer 3 · answered Feb 18 '14 at 03:50

The library Touche.js is a library meant to take your click events applied with jQuery and silently re-maps them to the "touchend" event for devices that support touch.

So you would simply have to define your function handleClicks and bind it to your button as if it was a click event.

The library should then re-map the click event to a touch event.

jQuery iPhone / ios7 click event vs touch

3 Answers3