Differences between $('.class').on and $(document).on in jquery

Question

What are the differences between

$(document).on('click', '.class', function() {
   //stuff
});

And

$(".class").on("click", function () {
    //stuff
});

Answer 1

The first subscribes to the .click event in a lively manner. This means that it will listen for DOM changes and if in the future someone add an element with class="class" it will have the click handler attaced.

The second will subscribe to the click handler of all elements with class="class" at the moment you are making this subscription. If for example in the future you make an AJAX request and inject into your DOM an element with this class, it won't have the click event applied to it.