$(document).on click handler and standard click handler behaving differently on iOS

Question

I generally bind click handlers using the form,

$(document).on('click', 'element', function() { ... });

to avoid issues with elements being loaded later. This was working correctly on desktop browsers (and Chrome emulating iPhone), but on an actual iPhone this was not working (and I tried solutions like 'cursor: pointer;')

I noticed that another button was working, using the standard click handler. I changed my new button to use

$('element').click(function() { ... });

and it started working. Why are these two methods of applying a click handler operating differently on iOS?

After testing, these two ways both work on my iPhone 6 Plus, iOS 9.3.3. — Elf Sundae, Sep 06 '16 at 11:35
@ElfSundae I'll try extract the core and put one together, it's not large so should be possible. — Evan Knowles, Sep 07 '16 at 06:16
It seems to me like a cache problem. Try to empty your cache. — cocoseis, Sep 11 '16 at 09:43
Click events on touch devices are kind of tricky. Have a look here: http://stackoverflow.com/questions/15095868/jquery-click-not-working-in-ios — cocoseis, Sep 11 '16 at 09:45

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

I looked at the jquery source code, and they are the same (both .click and on('click') use the same function which is the .on.

.click

jQuery.each( ( "blur focus focusin focusout resize scroll click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup contextmenu" ).split( " " ),
    function( i, name ) {

    // Handle event binding
    jQuery.fn[ name ] = function( data, fn ) {
        return arguments.length > 0 ?
            this.on( name, null, data, fn ) :
            this.trigger( name );
    };
} );

as you can see, $.click will eventually call .on (or .trigger if no arguments are present which is not your case)

Fair enough - it must be something unrelated. – Evan Knowles Sep 12 '16 at 10:21 — Evan Knowles, Sep 12 '16 at 10:21

Mohsin Raza · Answer 2 · 2016-09-06T16:02:41.823

I think this is happening due to 300ms delay for mobile browsers.

According to Google:

...mobile browsers will wait approximately 300ms from the time that you tap the button to fire the click event. The reason for this is that the browser is waiting to see if you are actually performing a double tap.

I faced same issue for one of my client project and for this I had used https://github.com/ftlabs/fastclick library for eliminating the 300ms delay between a physical tap and the firing of a click event on mobile browsers.

You can also try https://github.com/dave1010/jquery-fast-click

In same project I also faced double tap issue for dropdown menus and that was also due to 300ms delay.

Double tap issue was appearing in android browsers/devices so I detected the user agent and applied the a custom function to handle that issue this might be helpful for you.

<?php 
 if (user_agent() == 'android') {
    $handleClick = "onclick=\"checkClicks('$base_url/index.php')\"";
    $homePage = "#";
} else {
    $handleClick = " ";
    $homePage = "index.php";
}
?>

<!--//Script to Handle menu for mobile devices-->
<script type="text/javascript">
//handle 300ms delay click in android devices
var clicks = 0;
function checkClicks(e) {
    clicks = clicks + 1;
    if (clicks == 2) {
        window.location = e;
    } else {
        //do nothing
    }
}
</script>

You can also try some available plugins to handle this issue if you face.

https://github.com/dachcom-digital/jquery-doubleTapToGo

https://github.com/zenopopovici/DoubleTapToGo

This might be helpful for you as well.

Edited

The event handler is bound to an element higher up the DOM tree (in this case, the document) and will be executed when an event reaches that element having originated on an element matching the selector.

This is possible because most DOM events bubble up the tree from the point of origin. If you click on the #id element, a click event is generated that will bubble up through all of the ancestor elements (side note: there is actually a phase before this, called the 'capture phase', when the event comes down the tree to the target). You can capture the event on any of those ancestors.

The second example binds the event handler directly to the element. The event will still bubble (unless you prevent that in the handler) but since the handler is bound to the target, you won't see the effects of this process.

By delegating an event handler, you can ensure it is executed for elements that did not exist in the DOM at the time of binding. If your #id element was created after your second example, your handler would never execute. By binding to an element that you know is definitely in the DOM at the time of execution, you ensure that your handler will actually be attached to something and can be executed as appropriate later on.

It's probably not working due to one of:

Not using recent version of jQuery
Not wrapping your code inside of DOM ready
or you are doing something which causes the event not to bubble up to the listener on the document.

To capture events on elements which are created AFTER declaring your event listeners - you should bind to a parent element, or element higher in the hierarchy.

For example:

$(document).ready(function() {
    // This WILL work because we are listening on the 'document', 
    // for a click on an element with an ID of #test-element
    $(document).on("click","#test-element",function() {
        alert("click bound to document listening for #test-element");
    });

    // This will NOT work because there is no '#test-element' ... yet
    $("#test-element").on("click",function() {
        alert("click bound directly to #test-element");
    });

    // Create the dynamic element '#test-element'
    $('body').append('<div id="test-element">Click mee</div>');
});

In this example, only the "bound to document" alert will fire.

JSFiddle with jQuery 1.9.1

Afraid not - no matter how many times I tap, the button never works, and it works immediately on the first tap with the standard click. — Evan Knowles, Sep 05 '16 at 10:45
why are you not using it like this? $("element").on("click", function(){ //do something. }); — Mohsin Raza, Sep 05 '16 at 19:13

$(document).on click handler and standard click handler behaving differently on iOS

2 Answers2

.click