JQuery script only works after page reload

Question

JQuery script only works after page reload

Navigation

#1 by (0 votes)

0

I have a jquery script that only works after the page reload.

Why does this occur?

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>

html jquery css

asked by anonymous 16.10.2018 / 14:29

1 answer

Wordpress plugin to restrict access to files only after registration I need help to join two PHP codes

score 0 · Answer 1

Dude your code works normal, and is not running just after the reload of the page does. 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><ulclass="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>

Being that there is a much simpler way of doing 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><ulclass="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>