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请求的success上执行。要使代码生效，我必须将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>

在第一个例子中，我可以取消绑定点击管理器，但无法传递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 example

jQuery .off()

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

1 个答案: