意外的按钮点击行为。

Question

当点击按钮 #1 时，按钮 #2 出现并且按钮 #2 在按钮 #1 被点击后立即接收点击事件。

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");
});

Answer 1

我想你想要这个：-

您点击的方式有误。

我们可以这样点击.default-btnclass

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

现在我们选择了 .default-btn class，它位于 body 标签内，然后是运行函数。

  $("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>

意外的按钮点击行为。

Unintended button click behavior.

html

javascript

css

jquery

click