Question

I have two buttons:

<button id="1">button 1</button>
<br>
<button id="2">button 2</button>

I want to make an alert message to appear only after the two buttons are clicked, this is part of a larger app for which I am using Backbone.js, so far I have this:

var test = {}; 

_.extend(test, Backbone.Events); //in order to use the backbone events feature

test.on("hello bye", function(){
    alert("works!");
});

$("#1").click(function() {
    test.trigger("hello");
});

$("#2").click(function() {
    test.trigger("bye");
}?);

This presents the message whenever one of the two buttons are clicked, but I need it to work only after the two buttons are clicked. Is there a way to achieve this using the Backbone.Events feature or perhaps using jQuery?

Fiddle: http://jsfiddle.net/ccgRN/

Thanks

Answer 1

A minimalist implementation would be to create a couple variables to keep track of what events have been fired.

var helloClicked = false;
var byeClicked = false;
var test = {};

_.extend(test, Backbone.Events);

test.on('hello bye'), function() {
  if (helloClicked && byeClicked) {
    alert('works!');
  }
});

$('#1').click(function() {
  helloClicked = true;
  test.trigger('hello');
});

$('#2').click(function() {
  byeClicked = true;
  test.trigger('bye');
});