Question

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

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

Answer 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
}

其他一些答案的问题是，您很容易最终将多个事件监听器实例堆叠在一起，只需单击一下即可解雇。如果多次单击“重置”，最终会得到许多您不想要的“开始”事件监听器的绑定。根据您想要的功能，确保您只允许一个按钮一次连接一个侦听器，或者取消绑定所有以前的侦听器并仅重新绑定您想要的那些。

Answer 2

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

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

修改

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

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

Answer 3

您想要拉出试图绑定点击的功能，以便根据需要添加和删除它。

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

Answer 4

也许这更有效率？

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

Answer 5

使用$（'＃xyz）.one（'click'，function（）{}}而不是绑定unbind。使用one会在解雇后自动解除绑定，所以你只需要担心将.one应用到下一个控件

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

5 个答案:

修改

修改