jquery $(document).on("click"... Не работает -- исследуем причину. Обработчик события привязывается но не вызывается

Проблема

Пусть у нас есть код для двух блоков (родитель необязательно непосредственный):

HTML:

<div class="modal-content">
 <a href="#" class="add-affected-person-field-group">[Добавить]</a>
</div>

И JS:

1. для родителя:
   

   $('.modal-content').on('click', function(e) {
   	console.log('no action!', e.target);
      return false;
    });
   

2. для потомка (используем именно такую форму, так как подразумевается, что этот элемент добавляется динамически):
   

   $(document).on("click", addFieldsGroupSelector, function(e) { // добавляем блок с полями
   	console.log('add click live');
   	self.addNewFiledsGroup();
   
   	return false;
   });
   

   -- тут используется "живая" привязка и вот этот то обрабочик хоть и привязывается но не вызывается.

Причина

Фишка в том, что в данном случае для того, чтобы произошла обработка события клика по элементу, необходимо, чтобы это событие "всплыло вврех" по иерархии вложенных DOM блоков аж до уровня document, но во время всплытия оно перехватывается обработчиком родителя (который тоже обработывает клик и возвращает false)

То есть:

для "живой" привязки недопустимо, чтобы обработчики того же события для родительских блоков перехватывали событие "неживым" способом ;)

Решение

Есть два подхода:

1. Или использовать "неживую" привязку к потомку, а обычную привязка событий сразу после добавления динамически добавляемого элемента.

   Для "потомка", о котором говорилось выше, это будет выглядеть так как-то:

   $(addFieldsGroupSelector).on("click",  function() { // добавляем блок с полями
   	console.log('add click simple');
   	self.addNewFiledsGroup();
   
       return false;
   });

2. Или переписать все "перехватчики" событий (т.е. обработчики, которые заканчиваются как-то так) тоже с использованием document (тогда обработчик потомка можно оставить как выше), т.е. для обработчика родитля выше это будет выглядеть как:

 
/* Перехватываем клик, чтобы можно было кликать
  * по модальному окну и оно бы при этом не скрывалось*/
 $(document).on('click', '.modal-content', function(e) {
	console.log('no action!', e.target);
   return false;
 });

-- второй вариант на мой взгляд удобнее для не слишком сложных интерфейсов.

Источник: (решил благодаря комментарию): https://forum.jquery.com/topic/document-...