Jquery script only works after page re-load

Question

I have a jquery script that only works after page re-load.

Why does this happen?

My script:

$(document.body).ready(function() {
    $('.list').each(function(index){

        var topli = $(this).children(":first-child");
        topli.click(function(){
            var parent = $(this).parent();
            var sublis = parent.find(".sub");

            if(sublis.is(':visible')){
                sublis.slideUp();
                topli.find('.fa-arrow-right').removeClass('rotatedown');

            }else{
                sublis.slideDown();
                topli.find('.fa-arrow-right').addClass('rotatedown');

            }
        })
    })
});

My jquery is the first script to be imported; This is the target of my script:

    <div>
        <ul class="list">
            <button id="botaoconf" class="btn btn-amber btn-lg btn-group top" mat-button>
                <i class="fa fa-cog iconemenu"></i>
                <br>
                Configurações <i class="fa fa-arrow-right"></i>
            </button>
            <li class="sub">
                <a class="dropdown-item waves-effect" (click)="verificaPermissao(9, 'confestoque')">
                <i class="mr-3 fa fa-archive"></i>Estoque</a>
            </li>
            <li class="sub">
                <a class="dropdown-item waves-effect" (click)="verificaPermissao(10, 'confprecificacao')">
                <i class="ml-1 mr-4 fa fa-dollar"></i>Precificação</a>
            </li>
        </ul>
    </div> 

Answer 1

Guy your code works normal, and it is not running only after the page Reload no. I also removed the line $('.list'). each(Function(index) that does nothing.

$(document).ready(function() {

  var topli = $(this).children(":first-child");
  topli.on("click", function(){
     var parent = $(this).parent();
     var sublis = parent.find(".sub");

     if(sublis.is(':visible')){
         sublis.slideUp();
         topli.find('.fa-arrow-right').removeClass('rotatedown');

     }else{
         sublis.slideDown();
         topli.find('.fa-arrow-right').addClass('rotatedown');

     }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
   <ul class="list">
      <button id="botaoconf" class="btn btn-amber btn-lg btn-group top" mat-button>
          <i class="fa fa-cog iconemenu"></i>
          <br>
          Configurações <i class="fa fa-arrow-right"></i>
      </button>
      <li class="sub">
         <a class="dropdown-item waves-effect" (click)="verificaPermissao(9, 'confestoque')">
            <i class="mr-3 fa fa-archive"></i>Estoque
         </a>
      </li>
      <li class="sub">
         <a class="dropdown-item waves-effect" (click)="verificaPermissao(10, 'confprecificacao')">
            <i class="ml-1 mr-4 fa fa-dollar"></i>Precificação
         </a>
      </li>
   </ul>
</div>

Since there’s a much simpler way to do what you want:

$(document).ready(function() {
  $( "button" ).on("click", function() {
    $( "li" ).toggle( "slow" );
  });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div>
   <ul class="list">
      <button id="botaoconf" class="btn btn-amber btn-lg btn-group top" mat-button>
          <i class="fa fa-cog iconemenu"></i>
          <br>
          Configurações <i class="fa fa-arrow-right"></i>
      </button>
      <li class="sub">
         <a class="dropdown-item waves-effect" (click)="verificaPermissao(9, 'confestoque')">
            <i class="mr-3 fa fa-archive"></i>Estoque
         </a>
      </li>
      <li class="sub">
         <a class="dropdown-item waves-effect" (click)="verificaPermissao(10, 'confprecificacao')">
            <i class="ml-1 mr-4 fa fa-dollar"></i>Precificação
         </a>
      </li>
   </ul>
</div>