$(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?

Answer 1

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)