如何取消绑定事件处理程序并同时传递参数？

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声明。 该示例是我实际问题的简化版本。 在我的实际问题中， inner函数是在ajax请求success时执行的each函数。 为了使代码工作，我必须将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> 

在第一个例子中，我可以取消绑定click handeler，但无法传递x作为参数。 在第二个例子中，我可以传递x作为参数但不能解除绑定事件。

• 如何取消绑定事件处理程序并同时传递参数？ 另请注意，我不想删除所有处理程序与$("#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> 

点击RED挂起我的电脑，所以我无法测试。

谢谢...

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的例子

jQuery .off()