How to detect if the click event occurred using jQuery?

Question

I have 2 buttons. I want to detect if the previous button clicked then on 2nd button click it should display some data otherwise if user is directly clicking on the second button, it should display an alert(please click the previous button first). I have tried to do so but not able to detect whether the 1st button is clicked or not :-(

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

Couldn't you just set a flag when the first button is clicked and then check for it on clicking the second button? — j08691
– j08691, Commented Aug 17, 2013 at 20:15

Paul Straw · Accepted Answer · 2013-08-17 20:17:45Z

3

EDIT: I chose not to use a variable, because there's not really much reason to use one. Avoiding unnecessary scope pollution, and whatnot.

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

answered Aug 17, 2013 at 20:17

Paul Straw

7476 silver badges9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sergio · Accepted Answer · 2013-08-17 20:14:18Z

2

You could use this, creating a variable to store a true/false related to the first button:

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

Demo here

answered Aug 17, 2013 at 20:14

Sergio

28.9k11 gold badges90 silver badges132 bronze badges

1 Comment

user2663401 Over a year ago

thanks Sergio.. it works! I was missing the conditioning flag :-)

M Khalid Junaid · Accepted Answer · 2013-08-17 20:15:06Z

1

Try this one define a global variable to track the click of first button

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

    }
    });

answered Aug 17, 2013 at 20:15

M Khalid Junaid

64.6k10 gold badges93 silver badges120 bronze badges

Comments

ravax · Accepted Answer · 2013-08-17 20:14:30Z

0

I think you can put the second button function in the first one.

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

You then also won't need the check in the second button.

answered Aug 17, 2013 at 20:14

ravax

931 gold badge1 silver badge5 bronze badges

Comments

Suresh Atta · Accepted Answer · 2013-08-17 20:16:14Z

0

Try to set a flag

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

check firstButtonClicked in second button click.

answered Aug 17, 2013 at 20:16

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

Collectives™ on Stack Overflow

How to detect if the click event occurred using jQuery?

5 Answers 5

HTML

JavaScript

Comments

Demo here

1 Comment

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

HTML

JavaScript

Comments

Demo here

1 Comment

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related