Question

I’m trying to use jQuery to attach a listener onto my navigation so that I can show :hover effects on apple touch devices.

I cant seem to get it too work with what I have so far, has anybody used this before?

<script>
    $(document).ready(function() {

        //ipad and iphone fix
        if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i))) {
             $("#primary-navigation li a").bind('touchstart', function(){
                console.log("touch started");
             });

             $("#primary-navigation li a").bind('touchend', function(){
                console.log("touch ended");
             });
        }
    });
</script> 

---

I’ve added an alert just before my selectors which seems to work…

Answer 1

First, if you’re on jQuery prior to 1.4.3 try to bind events with .live() instead of .bind(). This will ensure that you will bind to that event even for future, dynamically-injected new elements responding to the selector match.

If you’re on jQuery 1.4.3+ but earlier than 1.7 use .delegate() instead of .bind().

If you’re on jQuery 1.7+ then use .on().

That said, if your test is taking place on iPhone or iPad, use alert() instead of console.log(), as you hardly could check console outputs on those devices.

I can also point out that the markup breakdown you posted is broken, as you have a </cufon element missing the ‘>’ character. It seems this could be a copy-paste issue.

Finally, I can see you’re using touch* events; I must assume you are on jQuery Mobile, jQTouch or something?

Because if you’re not on one of those, I strongly doubt that you could register listeners for touch events, as basic jQuery doesn’t have a representation for them in its own API.