Question

我想让第二个按钮单击事件仅在第一个按钮单击事件工作后才能工作。单击第一个按钮之前，第二个按钮的单击事件必须不起作用。

 <div class = "panel1">
 <button>button1</button>
 <p>Button 1 triggered</p>
</div>
<div class = "panel2">
<button>button1</button>
<p>Button 2 triggered</p>
</div>

 p{
 display:none;
} 


  $(document).ready(function(){
    $("button").click(function(){
    $(this).siblings("p").toggle();
      });
     })

JSFiddle Link

Answer 1

我会首先禁用第二个按钮。然后在用户单击第一个按钮后启用它。我为你提供了一些代码，看看会有什么样的，我希望这会有所帮助。

HTML：

<div class = "panel1">
    <button>button1</button>
    <p>Button 1 triggered</p>
</div>
<div class = "panel2">
    <button disabled>button1</button>
    <p>Button 2 triggered</p>
</div>

CSS：

p{
    display: none;
}

使用Javascript：

$(document).ready(function(){
  $(".panel1 button").click(function(){
      $(this).siblings("p").toggle();
      $(".panel2 button").prop("disabled", false);
  });
  $(".panel2 button").click(function(){
      $(this).siblings("p").toggle();
  });
})

Answer 2

您可以使用disabled-property解决问题。

$(document).ready(function() {
    $(button2).prop('disabled', true);
    $(button1).click(function() {
        $(button2).prop('disabled', false);
    });
});

Answer 3

$(".firstbutton").on("click", function(evt){
// custon script 
   $("#secondbutton").trigger("click");
 });

Answer 4

是的，您可以使第二个按钮单击事件仅在第一个按钮单击事件后才能工作：

$(document).ready(function(){
    $(".panel1 button").click(function(){
        $(this).siblings("p").toggle();
        $(".panel2 button").click(function(){
          $(this).siblings("p").toggle();
        });
    });
})

Answer 5

请找到以下解决方案：

https://jsfiddle.net/q8cyd2mr/6/

HTML部分：

<div class = "panel1">
      <button>button1</button>
      <p>Button 1 triggered</p>
    </div>
    <div class = "panel2">
      <button>button2</button>
      <p>Button 2 triggered</p>
</div>

JS部分：

$(document).ready(function(){
    $(".panel2 button").prop('disabled', true);
    $("button").click(function(){
        $(this).siblings("p").toggle();
        if($(this).parent().prop("class")=='panel1'){
          $(".panel2 button").prop('disabled', false);
        }
    });
});

Answer 6

除了其中两个方法之外，你可以保留一个布尔变量并在执行第二个方法之前检查它是否为真。执行后再将其设为假。并在第一个按钮单击事件方法中启用它更好的做法是禁用

如何在触发第一个按钮后才触发第二个按钮

6 个答案: