How can I preventDefault inside a callback inside an event handler?

Question

For example I have something like

$('div').on('click', '.button', function(event){
  $('.showdiv').show('fast', function(){
     var myvar = someFunction();
     if(myvar == 1){
        event.preventDefault();
     }
  });
});

I want to prevent the Default behaviour of the click button inside the callback of the show function (to ensure that the show div is shown before runnin the myvar function). IBut I can't make the preventDefault() works. How can I make it happen? Thanks!

Answer 1

Please check below updates code, I think you need also need to define event in show function.

$('div').on('click', '.button', function(event){
      $('.showdiv').show('fast', function(event){
         var myvar = someFunction();
         if(myvar == 1){
            event.preventDefault();
         }
      });
    });

Hope this will work for you.

Answer 2

It should not be inside the callback.

If you put it inside the callback the default behavior would have been already fired :

$('div').on('click', '.button', function(event)
  event.preventDefault();{
  $('.showdiv').show('fast', function(){
     var myvar = someFunction();
     if(myvar == 1){
     }
  });
});

Answer 3

in the code you are not passing event as parameter. change to

 $('.showdiv').show('fast', function(){
 var myvar = someFunction(event); // pass parameter
 if(myvar == 1){
    event.stopPropagation();
    event.preventDefault();
 }
});