Difference between jQuery's .on('click') vs .click()

Question

Could someone please help me to understand the difference between these two jQuery functions?

$('#theElement').click(function() {
    ... click handler code ...
});

AND

$('body').on('click', '#theElement', function() {
    .... click handler code ...
});

According to jQuery's documentation, .click() is just a shortcut for .on('click'). And that's the way I've always found it to work. However, I noticed a key difference when building out a prototype today. I could not use .click() when trying to assign an even listener to an element that wasn't yet in the DOM. However, if I did it with $('body').on('click', '#theElement'..., it worked!

Trying to understand why...

Does the .on() have something to do with event capturing that .click() does not?

Thank you to whoever can help point me in the right direction. This is driving me nuts!

Answer 1

.click() is an alias of .trigger('click'), while .click(data, fn) is an alias of .on('click', null, data, fn).

You might not pass in a second argument, in which case, .on('click', null, data, fn) will still bind the handler using data as the handler instead of fn.

Additionally, what this means is that there's no way to assign a delegate via .click(...), so if you need event delegation you should use .on(...)

From the latest source:

_{jQuery v1.10.2, lines 7554-7564:}

jQuery.each( ("blur focus focusin focusout load resize scroll unload click dblclick " +
    "mousedown mouseup mousemove mouseover mouseout mouseenter mouseleave " +
    "change select submit keydown keypress keyup error 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 );
    };
});

Answer 2

Apart from what they have in common:

• .click() can trigger a click event

  Description: Bind an event handler to the "click" JavaScript event, or trigger that event on an element.

• .on() uses delegation, which means you can target/attach events to dynamic created content (as long as the .on() method is applied to a parent element present when the code is run

  Description: Attach an event handler function for one or more events to the selected elements.[...] A bit more down the page: Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time.