1

Tenho alguns problemas com document.addEventListener("DOMContentLoaded" no seguinte trecho. Só consigo obter os valores de list quando aciono o ctrl+f5. Preciso ter quando carregada primeira vez. Consigo utilizar o onload no listener? Obrigado.

document.addEventListener("DOMContentLoaded", function(e) {
                    console.log('state2',document.readyState);

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

                var i;

                    for(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() {
                                // don't allow to scroll
                                noScroll();
                            },
                            onAfterOpen : function() {
                                // can scroll again
                                canScroll();
                                console.log(list[i]);
                            },
                            onBeforeClose : function() {
                                // don't allow to scroll
                                noScroll();
                            },
                            onAfterClose : function() {
                                // can scroll again
                                canScroll();
                            }
                        } );

                    }
                });
0

3 Respostas 3

4

DOMContentLoaded é um evento disparado assim que o HTML é carregado. É possível que o evento dispare antes mesmo do seu JavaScript ser carregado. Se isso acontecer, quando seu event listener for carregado, ele não irá executar, pois ele não pôde capturar o evento quando foi disparado.

Nesse caso, você pode fazer uma verificação dupla. Quando seu JavaScript carregar, verifique se o HTML já está carregado. Se sim, dispare sua função, se não, crie seu event listener.

if (document.readyState === "loading")
    document.addEventListener("DOMContentLoaded", onDOMLoaded);
else 
    onDOMLoaded();


function onDOMLoaded() {
    console.log('state2', document.readyState);

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

    var i;

    for (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 () {
                // don't allow to scroll
                noScroll();
            },
            onAfterOpen: function () {
                // can scroll again
                canScroll();
                console.log(list[i]);
            },
            onBeforeClose: function () {
                // don't allow to scroll
                noScroll();
            },
            onAfterClose: function () {
                // can scroll again
                canScroll();
            }
        });

    }
}
1
  • opa, isso ocorre mesmo nos elementos html's sendo criados no document? pois a consulta e view vem do banco de dados toda por javascript. Commented 19/02/2019 às 18:52
3

Utilize a função do evento readystatechange e execute o código apenas quando o retorno do evento for igual a complete (significa que a página foi totalmente carregada, inclusive itens assíncronos, como imagens e scripts).

Se você usar document.readyState fora do evento readystatechange, o resultado será sempre loading (que está carregando). Se usar dentro do evento DOMContentLoaded, o resultado será interactive (o DOM foi carregado, mas itens assíncronos não).

document.onreadystatechange = function(){

   if(document.readyState == "complete"){

      console.log('state2',document.readyState);

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

      var i;

      for(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() {
               // don't allow to scroll
               noScroll();
            },
            onAfterOpen : function() {
               // can scroll again
               canScroll();
               console.log(list[i]);
            },
            onBeforeClose : function() {
               // don't allow to scroll
               noScroll();
            },
            onAfterClose : function() {
               // can scroll again
               canScroll();
            }
         });
      }
   }

}
0

Resolvido, adicionei um observe e consegui manter o loop, o problema estava no carregamento do list, var list = document.getElementsByClassName( 'morph-button1' );

Segue o exemplo de como ficou.

function click() {          
        console.log('teste de documento',document.querySelectorAll( '.morph-button' ));
        var len = document.getElementsByClassName( 'morph-button' );
        console.log('teste de documento', len.length);

        var nodes = document.querySelectorAll( '.morph-button' );
            var docElem = window.document.documentElement, didScroll, scrollPosition;


            function noScrollFn() {
                window.scrollTo( scrollPosition ? scrollPosition.x : 0, scrollPosition ? scrollPosition.y : 0 );
            }

            function noScroll() {
                window.removeEventListener( 'scroll', scrollHandler );
                window.addEventListener( 'scroll', noScrollFn );

            }

            function scrollFn() {
                window.addEventListener( 'scroll', scrollHandler );
            }

            function canScroll() {
                window.removeEventListener( 'scroll', noScrollFn );
                scrollFn();
            }

            function scrollHandler() {
                if( !didScroll ) {
                    didScroll = true;
                    setTimeout( function() { scrollPage(); }, 60 );
                }
            };

            function scrollPage() {
                scrollPosition = { x : window.pageXOffset || docElem.scrollLeft, y : window.pageYOffset || docElem.scrollTop };
                didScroll = false;
            };

            scrollFn();


            console.log('this', this.target);
            console.log('state2', document.readyState);



            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();
            };

}

window.onload = click;

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .