What is diffrent between these syntax please Explain in details?

Question

What is diffrent between these syntax please Explain in details?

$(document).on("click", "#index1", function() {
    $(p).hide();
});
$("#index2").on("click", "#index1", function() {
    $(p).hide();
});
$("#index1").on("click", function() {
    $(p).hide();
});

Answer 1

In first case you add click listener to "document", but it be executed only if you click at "#index1". In second - you add listener to "index2" and it will be executed only if you click at "#index1" located inside of "#index2". In the third case you just add listener to "index1"