Function on resize does not enable events

Asked

Viewed 47 times

-1

I have a little problem with my script that I can’t fix. I have a function that disables Hover and I also want you to enable Hover. Already managed to disable but now I can’t enable.

Here is the code:

function adicionarBotao(){

  $('.collapseMenu').parent('.menuItem').off('mouseenter mouseleave');
  $('.collapseBotao').remove();
  var botao = '<button class="collapseBotao">dasds</button>';

  var numeroDeBotoes = $('.collapseMenu').parent('.menuItem').children('.collapseBotao');

  console.log(numeroDeBotoes.length);
  if(numeroDeBotoes.length == 0){
    $('.collapseMenu').parent('.menuItem').prepend(botao);
  }

}

javascript jquery

  • I cheated on myself. Thank you

  • When I give refresh is not returning 0

  • What I have to do?

  • Already solved. When I enter the function delete all buttons

  • But now you can’t click the buttons.

  • I’ve already refilled it

  • You disable events with .off()... to enable again, you need to call again the code that enables, type $("elemento"). on("mouseenter")... etc....

Show 2 more comments

1 answer

1

In your case, since you disable events with:

$('.collapseMenu').parent('.menuItem').off('mouseenter mouseleave');

What you have to do is recall the code that enables the events. To avoid having to repeat the same code, put them in a function and call it when loading the page and when you add the button (if that’s what you want). Then it would look like this:

$(function(){
   $(window).on("resize", adicionarBotao);
   eventos(); // chama a função

   // função que habilita os eventos
   function eventos(){
      $('.collapseMenu').parent('.menuItem').on("mouseenter", function(){
         console.log("entrou");
      }).on("mouseleave", function(){
         console.log("saiu");
      });
   }

   function adicionarBotao(){

     $('.collapseMenu').parent('.menuItem').off('mouseenter mouseleave');
     $('.collapseBotao').remove();
     var botao = '<button class="collapseBotao">dasds</button>';

     var numeroDeBotoes = $('.collapseMenu').parent('.menuItem').children('.collapseBotao');

     console.log(numeroDeBotoes.length);
     if(numeroDeBotoes.length == 0){
       $('.collapseMenu').parent('.menuItem').prepend(botao);
       eventos(); // chama a função para habilitar os eventos novamente
     }
   }
});

Browser other questions tagged javascript jquery

You are not signed in. Login or sign up in order to post.