javascript - 如何使用jQuery检测点击事件是否发生？

Question

我有 2 个按钮。我想检测是否点击了上一个按钮然后点击第二个按钮它应该显示一些数据，否则如果用户直接点击第二个按钮，它应该显示一个警报（请先点击上一个按钮）。我试过这样做，但无法检测到第一个按钮是否被点击:-(

HTML

<input type="button" id="btn1" value="button1"></input>
<input type="button" id="btn2" value="button2"></input>

JavaScript

       $('#btn1').click(function(){
           alert('Button 1 Clicked');
        });

        $('#btn2').click(function(event) {
            var inputButton = document.getElementsByTagName('input');
            var $target = $(event.target);
            if( $target.is(inputButton[1]) ) {
                alert("Please click the 1st Button first");
            } else{
                alert('Button 2 Clicked');
            }
        });

Answer 1

编辑：我选择不使用变量，因为没有太多理由使用变量。避免不必要的范围污染等等。

HTML

<button id="btn1">First Button</button>
<button id="btn2">Second Button</button

JavaScript

$(document).ready(function() {
    $('#btn1').on('click', function() {
        alert('Button 1 clicked');

        $('#btn2').data('btn1-clicked', true);
    });

    $('#btn2').on('click', function() {
        var el = $(this);

        if (el.data('btn1-clicked')) {
            alert('Button 2 clicked');
        } else {
            alert('Please click the 1st button first');
        }
    })
});

Answer 2

您可以使用它，创建一个变量来存储与第一个按钮相关的真/假：

var btn_clicked = false;
$('#btn1').click(function () {
    btn_clicked = true;
    alert('Button 1 Clicked');
});

$('#btn2').click(function (event) {
    var inputButton = document.getElementsByTagName('input');
    var $target = $(event.target);
    if (!btn_clicked) {
        alert("Please click the 1st Button first");
    } else {
        alert('Button 2 Clicked');
    }
});

演示在这里

Answer 3

试试这个定义一个全局变量来跟踪第一个按钮的点击

   var buttonclicked=false;
   $('#btn1').click(function(){
   buttonclicked=true;
       alert('Button 1 Clicked');
    });

    $('#btn2').click(function(event) {

      if(!buttonclicked){
     alert("please click button1 first")
      }else{
        var inputButton = document.getElementsByTagName('input');
        var $target = $(event.target);
        if( $target.is(inputButton[1]) ) {
            alert("Please click the 1st Button first");
        } else{
            alert('Button 2 Clicked');
        }

    }
    });

Answer 4

我认为您可以将第二个按钮功能放在第一个中。

$('#btn1').click(function(){
       alert('Button 1 Clicked');
    $('#btn2').click(function(event) {
        var inputButton = document.getElementsByTagName('input');
        var $target = $(event.target);
           alert('Button 2 Clicked');
        }
    });
  });

然后，您也不需要在第二个按钮中进行检查。

Answer 5

尝试设置一个标志

var firstButtonClicked;
$('#btn1').click(function(){
           firstButtonClicked = true;
           alert('Button 1 Clicked');
        });

检查firstButtonClicked第二个按钮单击。