Простой вопрос. Событие на блоке внутри блока.
 

Всем привет! Прошу помощи, что-то сам не смог найти ответа на свой вопрос:

Есть такая HTML структура:

<div id="parent" style="width: 400px; height: 400px;">
  <div id="children" style="width: 100px; height: 100px;">Бла бла</div>
</div>

Необходимо повесить такие события:

$('#parent').on('click', function() {
  alert('Hello');
});

$('#children').on('click', function() {
  alert('Bye');
});

То есть, чтобы при нажатии на #children не срабатывало событие, повешенное на #parent.

$('#children').on('click', function() {
  $('#parent').off('click')
  alert('Hello');
});

Код приведенный выше не помогает, да и не оч разумный, как мне кажется.

Помогите, пожалуйста, кто чем может? ))

https://learn.javascript.ru/event-bubbling

$('#children').on('click', function(event) {
  event.stopPropagation();
  alert('Bye');
});

Как же все просто в этой чертовке - джейквере)) Спасибо!

pifon, намного проще сем в чистом JS?

children.onclick = function(event){
  event.stopPropagation();
  alert('Bye');
}