EventListener só funciona com ctrl+f5

Oi Fernando, tudo bem? O evento só vai rolar uma vez justamente por que o loading da página só acontece uma vez. Se você precisa executar a função mais de uma vez, talvez seja melhor partir para outra estratégia como um setInterval que vai executar sua função de tempos em tempos.

Oi Wanderson, está acontecendo de outra forma, quando eu atualizo com o f5 ou ctrl+R o eventlistener não executa. ai acaba carregando só minha view com os creates do elementos. Só acontece depois de fazer o ctrl+f5.

Fernando, por que você está usando o DOMContentLoaded? Ele é um evento que ocorre antes de parsear css e por isso de fazer o layout da página. Então para animar alguma coisa, recomendo usar outro evento.

Você tem alguma mensagem de erro no console que pode dar uma dica do que pode estar acontecendo?

Oi Wanderson, tenho visto quando recarrego com f5: esta mensagem:

4.3.5.swiper.js?v=0:362 [Violation] Added non-passive event listener to a scroll-blocking 'wheel' event. Consider marking event handler as 'passive' to make the page more responsive. See https://www.chromestatus.com/feature/5745543795965952

Depois disso o for não ocorre.

A linha responsável pelo swyper tem esta função: el.addEventListener(event, handleEvent, capture);

e a função que recebe a função de click do botão: function UIMorphingButton( el, options ) { this.el = el; console.log('button el',el); this.options = extend( {}, this.options ); extend( this.options, options ); this._init(); }

Seria a variável el ?

resolvi com o MutationObserver, segue o codigo:

            var divArray = document.getElementById('atividades');

            var observer = new MutationObserver(function(){
               console.log('observer1', document.getElementsByClassName('morph-button').length);
               console.log('observer2',document.getElementsByClassName('morph-button'));

               var list = document.getElementsByClassName('morph-button');
                console.log('list', list.length);

               // var i;

                for (var i = 0; i < list.length; i++) {
                    console.log('list iteration', list);
                    console.log('list index', i);

                    new UIMorphingButton( list[i], {
                        closeEl: '.icon-close',
                        onBeforeOpen: function () {

                            noScroll();

                        },
                        onAfterOpen: function () {

                            canScroll();

                        },
                        onBeforeClose: function () {

                            noScroll();

                        },
                        onAfterClose: function () {

                            canScroll();

                        }
                    });

                }

            });

            observer.observe(divArray, { attributes: false, childList: true, subtree: true });

            // When you've got what you need, you should call this function to trigger a disconnect 
            function classesFound(){
               observer.disconnect();
            };

Nossa, desculpa a demora, mas fico feliz que tenha resolvido. Esse MutationObserver eu não conhecia, obrigado por compartilhar.

Esse MonthingButton é dessa biblioteca do GitHub? https://github.com/codrops/ButtonComponentMorph

Estava tentando entender como ela funciona para poder te ajudar melhor, mas a documentação me parece bem precária. Ia ter que ler linha a linha do código.

Sim, esta mesmo Wanderson, refatorei o loop pois os arrays vem de outro nó, ai iterei pela forma mais simples mesmo. o problema é que o nem sempre o list carregava.

Entendi, mas que bom que deu tudo certo! Bons estudos e se precisar é só chamar Fernando :)