单击一个按钮以单击另一个按钮

Question

我正在尝试单击一个按钮 (sbtn2) 以便触发另一个按钮 (sbtn1)。我试试：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <script>
      $(function() {
        $("#stack").hide();
        $("#sbtn2").on("click", function() {
          $("#sbtn1").click(function() {
            $("#stack").show();
          });
        });
      });
    </script>
  </head>
  <body>
    <button id="sbtn1">OK</button>
    <button id="sbtn2">See</button>
    <p id="stack">
      Hi, my name is Stack Overflow!
    </p>
  </body>
</html>

我希望 stack 仅在 sbtn1 被点击 sbtn2 时出现。

也就是说，我需要按See让它点击OK然后出现Stack。

Answer 1

尝试这样的事情：

为两个按钮添加单独的事件侦听器

$(function () {

  $("#stack").hide();

  $("#sbtn1").on("click", function () {
    $("#stack").show();
  });

  $("#sbtn2").on("click", function () {
    $("#sbtn1").click();
  });
});

Answer 2

目前，您的代码使得当您点击按钮 2 时，按钮 1 的事件处理程序被设置，这样您就可以点击按钮 1 并看到隐藏的消息。

要使其在单击按钮 2 时执行与按钮 1 相同的操作，只需在按钮 2 上设置一个处理程序来调用按钮 1 的单击回调函数。

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">
    <link rel="stylesheet" href="/resources/demos/style.css">
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script>
    <script src="https://code.jquery.com/ui/1.13.1/jquery-ui.js"></script>
    <script>
      $(function() {
        $("#stack").hide();
        
        $("#sbtn1").click(function() {
          $("#stack").show();
        });
        
        $("#sbtn2").on("click", function() {
          $("#sbtn1").click();
        });
      });
    </script>
  </head>
  <body>
    <button id="sbtn1">OK</button>
    <button id="sbtn2">See</button>
    <p id="stack">
      Hi, my name is Stack Overflow!
    </p>
  </body>
</html>

单击一个按钮以单击另一个按钮

Click on a button for another to be clicked

html

javascript

jquery