В чем разница написания таких событий клика у jquery?
1. Делегирование события. Необходим, когда у вас имеются динамические манипуляции с контентом. Такие конструкции, как правило, более производительны, т.к. событие навешивается один раз на родительский элемент. Может не сработать, если у вас прерывается всплытие(об этом забывать нельзя): <body>
    <div class='no-bubble'>
        <p class='click-target'></p>
    </div>
</body>// клик по .click-target не сработает никогда!
$('body').on('click','.click-target', function(){
    // do something...
});
$('body').on('click','.no-bubble', function(e){
    e.stopPropagation();
});
2 и 3 работают аналогично друг другу, но за небольшим исключением:$('#id').click();
// не равносильно:
$('#id').on('click');
// а работает как:
$('#id').trigger('click');
// т.е. не навешивает обработчик клика, а эмулирует клик по объекту.
А кроме того, 1 и 2 варианты позволяют делать так:$('id').on('click mouseover mouseout', function(e) {
   if (e.type === 'click') {
        // обработать клик...
   } else if (e.type === 'mouseover') {
       // ну принцип понятен, да?..
   }
});
1 и 2 почти тоже самое, не могу вспомнить в чем прикол, но в некоторых контекстах второй вариант не срабатывает как должен, но по сути разница в контексте. Можно указать где распологается элемент на который вашается событие, при наличии одинакового селектора.
разница между 1-2 и 3 в том что если элементы на которые вешается событие подгружаются или создаются через ajax/js, то третий вариант не будет работать.
То есть третий вариант сработает только для элементов которые уже есть на данный момент на странице.
1 и 2 работают в живом режиме и будут автоматически вешаться на элементы которые так или иначе появились на странице в любой момент.