如何使用jQuery检测click事件是否发生？

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

演示 here

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。