Почему не срабатывает event.stopPropagation() после перезагрузки страницы?

Question

[andreyqin]

Есть блок, при клике на который отображается всплывающее окно. В этом блоке есть кнопка, при клике на которую отображается другое всплывающее окно. Для лучшего понимания я набросал простой пример - jsfiddle.net/e5REB/5 , в котором, конечно же, все работает хорошо.

Но в моем случае существует один непонятный "баг": после перезагрузки страницы я кликаю по внешнему блоку - всплывает окно, закрываю его, кликаю по кнопке внутри этого блока - всплывает окно для внешнего блока, закрывается и всплывает окно уже для кнопки. Дальше все работает как надо. То есть, после очередной загрузки страницы event.stopPropagation() почему-то не срабатывает в первый раз.

Причем, интересный факт: если я перезагрузил страницу и сразу кликнул по кнопке внутри блока, то все сработало как надо, а вот при вызове сначала внешнего, а потом внутреннего события, возникает подобная проблема. Подскажите, в чем мой косяк?

Answer 1

[andreyqin]

Не совсем понимаю почему, но проблема оказалась в делегировании события у кнопок, которые находятся внутри блоков. Теперь, вместо назначения события общей обертки приходится назначать его каждой кнопке отдельно. Т.е. вместо:

$('.wrapper').on('click', 'span', function(event) { / ... / }

пишу:

$('.wrapper span').on('click', function(event) { / ... / }

Если кому несложно посмотреть мой пример и объяснить, почему, собственно, возникала данная проблема и почему она решается именно так, то буду очень благодарен.