CODEWITHSUNDEEP
javascriptjquery
Elliott McNary
Elliott McNary

Reputation: 1209

Have one button bind another button?

I'm trying to bind the start button when the reset button is pressed. When the start button is pressed it unbinds it's click event. But I want it so that when the reset button is clicked it binds the start button's click event so it can be pressed again. The below isn't working. Any ideas?

//Start
$("#start").bind("click", function(){
  $("#start").unbind('click')
  addCompMove();
  playerMove();
});
$("#reset").bind("click", function(){
  $("#start").bind('click');
  comp.length = 0;
  player.length = 0;
  hoverCount = 0;
  score = 0;
  console.log(comp)
});

Upvotes: 0

Views: 640

Answers (5)

Bindrid
Bindrid

Reputation: 3735

Use $('#xyz).one('click',function() {}} instead of bind unbind. Using one will unbind automatically after firing once so you only have to worry about applying .one to the next control.

Upvotes: 0

Victory
Victory

Reputation: 5890

You want to pull out the function you are trying to bind the click to so you can add and remove it as needed.

var doMove = function(){
  $("#start").unbind('click');
  addCompMove();
  playerMove();
}

$("#start").bind("click", doMove); // bind at start
$("#reset").bind("click", function(){
  $("#start").bind('click', doMove); // bind again
  comp.length = 0;
  player.length = 0;
  hoverCount = 0;
  score = 0;
  console.log(comp);
});

Upvotes: 0

showdev
showdev

Reputation: 29168

I suggest creating a function that executes your start actions.
That makes it easier to rebind the actions to the click event without redeclaring them every time.

function startActions() {
  $(this).unbind('click');
  addCompMove();
  playerMove();
}

$("#start").bind("click", startActions);

$("#reset").bind("click", function() {
  $("#start").bind("click", startActions);
  comp.length = 0;
  player.length = 0;
  hoverCount = 0;
  score = 0;
  console.log(comp);
});

Edit

Also, in your "reset" handler, I suggest unbinding the click event before rebinding it. This will prevent multiple click events from being bound if the "reset" button is clicked multiple consecutive times.

$("#start").unbind('click').bind("click", startActions);

Demonstration below:

var $output=jQuery('div#output');

function startActions() {
  $(this).unbind('click');
  $output.html($output.html()+"<br />"+"Started");
}

$("#start").bind("click", startActions);

$("#reset").bind("click", function() {
  $("#start").unbind('click').bind("click", startActions);
  $output.empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="start">START</button>
<button type="button" id="reset">RESET</button>
<div id="output"></div>

Edit

Another idea is to disable buttons rather than unbinding events:

var $output = jQuery('div#output'),
    $start = jQuery('#start'),
    $reset = jQuery('#reset');

$start.on("click", function() {
  $output.html($output.html() + "<br />" + "Started");
  $(this).prop('disabled', true);
  $reset.prop('disabled', false);
});

$reset.on("click", function() {
  $output.empty();
  $(this).prop('disabled', true);
  $start.prop('disabled', false);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button type="button" id="start">START</button>
<button type="button" id="reset" disabled>RESET</button>
<div id="output"></div>

Upvotes: 1

Vince Verhoeven
Vince Verhoeven

Reputation: 1773

maybe this is more efficient?

    var started = false;
    $("#start").bind("click", function(){
      if(!started){
      addCompMove();
      playerMove();
      started = true; 
      }
    });
    $("#reset").bind("click", function(){
      if(started){
      comp.length = 0;
      player.length = 0;
      hoverCount = 0;
      score = 0;
      console.log(comp); 
      started = false; 
     }
});

Upvotes: 0

jered
jered

Reputation: 11571

on() and off() are the preferred methods to bind and unbind event listeners in jQuery since version 1.7.

Instead of using anonymous functions, you should declare them. It's more modular, easier to understand, and lets you do what you're trying to do.

$("#start").on("click", startClicked);

function startClicked(e){
    $(this).off("click");
    $("#reset").on("click", resetClicked);
    // other start stuff
}

function resetClicked(e){
    $(this).off("click");
    $("#start").on("click", startClicked);
    // other reset stuff
}

The problem with some of the other answers is you will easily end up with multiple instances of an event listener stacked on top of each other, all firing from a single click. If you click "reset" many times, you will end up with many bindings of the "start" event listener which you do not want. Depending on the functionality you want, make sure you either only allow one button to have a listener attached at a time, or unbind all previous listeners and rebind only the ones you want.

Upvotes: 2

Related Questions