Question

我有两个按钮（开和关）。当我点击“on”时，我想打开名为turnToolOn的功能，当我点击“关闭”时，我想关闭该功能。我现在有这个：

$("body").on("click", "#turnOn", turnToolOn);
$("body").off("click", "#turnOff", turnToolOn);

on（）函数正常工作，但是当我点击“关闭”时，我似乎无法让我的函数停止执行。

Answer 1

您需要在＆＃34;点击＆＃34;中包装您的开/关事件。 event，并使用您正在使用的实际元素的ID作为激活它的按钮。

因此，如果您有一个按钮<button id="turnOn">On</button>和<button id="turnOff">Off</button>：

$( "#turnOn" ).click(function() {
  $( "body" )
    .on( "click", turnToolOn )
});
$( "#turnOff" ).click(function() {
  $( "body" )
    .off( "click", turnToolOn )
});

在jQuery API Docs site for the off() event handler了解详情！

Answer 2

如评论中所述，您只能在DOM中启用/禁用某些事件侦听器。如果需要启动/停止某些功能的功能，则需要定义它们。假设turnToolOn做了你期望它做的事情，你需要编写它的“计数器”函数（比如说turnToolOff）并将其用作附加到你的关闭按钮的处理程序：

$("body").on("click", "#turnOn", turnToolOn);
$("body").on("click", "#turnOff", turnToolOff); /// <--- here it is

如果您不打算动态删除/添加开/关按钮（因为您使用ID，则无论如何都不能有多个），您可以删除委派的事件处理程序（on()并在DOM准备好后使用常规绑定。

这是一个超级简单的例子，用它来切换一个元素的类：

$("body").on("click", "#turnOn", turnToolOn);
$("body").on("click", "#turnOff", turnToolOff);

function turnToolOn() {
  $('#el').addClass('on');
  }

function turnToolOff() {
  $('#el').removeClass('on');
  }

#el {
  width: 50px;
  height: 50px;
  background: #eee;
  }

#el.on {
  background: #0c0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button id="turnOn">On</button><button id="turnOff">Off</button>
<br />
<div id="el"></div>

以下是on / off函数可以执行的操作（绑定/解除绑定事件处理程序），因此您可以更好地理解它：

$("body").on("click", "#turnOn", turnToolOn);
$("body").on("click", "#turnOff", turnToolOff);

function turnToolOn() {
  $("body").on("click", "#trigger", triggerCall);
  alert('trigger handler attached');
  }

function turnToolOff() {
  $("body").off("click", "#trigger", triggerCall);
  alert('trigger handler detached');
  }

function triggerCall() {
  $('#el').toggleClass('on');
  }

#el {
  width: 50px;
  height: 50px;
  background: #eee;
  }

#el.on {
  background: #0c0;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<button id="turnOn">On</button><button id="turnOff">Off</button>
<button id="trigger">Trigger</button>
<br />
<div id="el"></div>

如何使用jQuery关闭函数？

2 个答案: