CODEWITHSUNDEEP
javascriptjqueryhtmlcssclick
Arthur Muller
Arthur Muller

Reputation: 81

Unintended button click behavior.

When clicking into button #1, button #2 appears and button #2 is receiving a click event right after button #1 is clicked.

HTML:

<button class="btn btn-primary default-btn" type="button">Ver no mapa</button> 

<button class="btn btn-primary button-maps display-none" type="button">
   <a href="https://goo.gl/maps/1HEDVJ2QHYr" target="_blank">
     <div class="btn-img-container">
      <img src="/unidades/PublishingImages/home-itaim/maps-icon.png" height="22" 
      width="22" alt="">
     </div>  
   </a> 
   <div class="divisor">
   </div>
   <a href="https://goo.gl/maps/1HEDVJ2QHYr" target="_blank">
     <div class="btn-img-container"> 
       <img src="/unidades/PublishingImages/home-itaim/waze-icon.png" 
       height="22" width="22" alt="">
      </div> 
    </a>
</button>

Jquery:

$(".default-btn").on("click touchstart", function(){
    $(this).addClass("display-none");
    $(this).parent().children(".button-maps").removeClass("display-none");
});

Upvotes: 0

Views: 123

Answers (1)

Rohit Verma
Rohit Verma

Reputation: 3783

I think you want this:-

You were clicking with the wrong way.

We can click on .default-btn class with this way 

('body').on("click", ".default-btn", function(){});

Now we have selected .default-btn class which is found inside body tag then run function.

  $("body").on("click", ".default-btn", function(){
    $(this).hide();
    $(this).parent().children(".button-maps").removeClass("display-none");
});
    
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  
  
<button class="btn btn-primary default-btn" type="button">Ver no mapa</button> 

<button class="btn btn-primary button-maps display-none" type="button">
   <a href="https://goo.gl/maps/1HEDVJ2QHYr" target="_blank">
     <div class="btn-img-container">
      <img src="/unidades/PublishingImages/home-itaim/maps-icon.png" height="22" 
      width="22" alt="">
     </div>  
   </a> 
   <div class="divisor">
   </div>
   <a href="https://goo.gl/maps/1HEDVJ2QHYr" target="_blank">
     <div class="btn-img-container"> 
       <img src="/unidades/PublishingImages/home-itaim/waze-icon.png" 
       height="22" width="22" alt="">
      </div> 
    </a>
</button>

Upvotes: 1

Related Questions