有一个按钮绑定另一个按钮？答案

【问题标题】：Have one button bind another button?有一个按钮绑定另一个按钮？
【发布时间】：2015-12-11 10:36:34
【问题描述】：

我正在尝试在按下重置按钮时绑定开始按钮。当按下开始按钮时，它会取消绑定它的点击事件。但我想要它，以便在单击重置按钮时绑定开始按钮的单击事件，以便可以再次按下它。以下不起作用。有什么想法吗？

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

【问题讨论】：

标签： javascript jquery

【解决方案1】：

on() 和 off() 是自 1.7 版以来在 jQuery 中绑定和取消绑定事件侦听器的首选方法。

您应该声明它们，而不是使用匿名函数。它更加模块化，更易于理解，并且可以让您做您想做的事情。

$("#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
}

其他一些答案的问题是，您很容易最终得到一个事件侦听器的多个实例堆叠在一起，所有实例都通过单击触发。如果您多次单击“reset”，您将得到许多您不想要的“start”事件侦听器的绑定。根据您想要的功能，确保您一次只允许一个按钮附加一个侦听器，或者取消绑定所有以前的侦听器并仅重新绑定您想要的那些。

【讨论】：

谢谢伙计...这帮助很大。也欣赏模块化技巧

【解决方案2】：

我建议创建一个函数来执行您的启动操作。
这样可以更轻松地将操作重新绑定到单击事件，而无需每次都重新声明它们。

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

编辑

另外，在您的“重置”处理程序中，我建议在重新绑定之前取消绑定点击事件。如果连续多次点击“重置”按钮，这将防止多次点击事件被绑定。

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

下面的演示：

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>

编辑

另一个想法是禁用按钮而不是解除绑定事件：

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>

【讨论】：

【解决方案3】：

也许这样更有效率？

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

【讨论】：

【解决方案4】：

您想拉出您尝试将点击绑定到的函数，以便您可以根据需要添加和删除它。

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

【讨论】：

编辑说你少了一些分号

【解决方案5】：

使用 $('#xyz).one('click',function() {}} 代替绑定解除绑定。使用 one 将在触发一次后自动解除绑定，因此您只需担心将 .one 应用于下一个控件.

【讨论】：