javascript - 如何同时解除绑定(bind)事件处理程序并传递参数？

Question

我的代码中有以下场景:

function outer() {
  console.log(x);
  //after some time if certain conditions are met remove handler from #red
  $("#red").off("click", outer);
}

function inner() {
  var x = 786;  
  $("#red").click(outer); 
}

inner();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="red">
  RED
</div>

outer 函数不能在 inner 函数内部声明。该示例是我的实际问题的简化版本。在我的实际问题中，inner 函数是一个 each，它在 ajax 请求成功时执行。为了使代码正常工作，我必须将 x 作为参数传递给 outer，因为 x 超出了 outer 的范围>。那么代码将是这样的:

function outer(x) {
  console.log(x);  
}

function inner() {
  var x = 786; 
  
  $("#red").click(function(){   
    outer(x);
  });
}

inner();
//after some time if certain conditions are met remove handler from #red

$("#red").off("click", outer); // Dosen't work now

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="red">
  RED
</div>

在第一个示例中，我可以取消绑定(bind)点击处理程序，但无法将 x 作为参数传递。在第二个示例中，我可以传递 x 作为参数，但无法取消绑定(bind)事件。

• 如何同时取消绑定(bind)事件处理程序并传递参数？另请注意，我不想使用 $("#red").off("click") 删除所有处理程序。

<小时/>

我尝试使用闭包，但它们也不起作用:

function extra(x) {
  function outer(x) {
    console.log(x);

    //after some time if certain conditions are met remove handler from #red
    $("#red").off("click", extra(x)); // Hangs the computer
  }
  return outer;
}


function inner() {
  var x = 786;

  $("#red").click(extra(x));
}

inner();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="red">
  RED
</div>

单击“红色”会使我的计算机挂起，因此我无法对此进行测试。

谢谢...

Answer 1

.off() 与 .on() 配合使用。所以你的代码可能如下所示:

function outer(x) {
  $('body').append('<br>button clicked and event removed! x value: ' + x);
  $("#red").off(".onlythis");
}

function inner() {
  var x = 786;  
  $("#red").on('click.onlythis', function(){ outer(x); }); 
}

inner();

jsfiddle example

jQuery .off()