如何使用Jquery的off()禁用div的点击事件、完成动画并使用on()重新启用点击事件？

Question

首先我知道有很多类似的问题，但是我无法理解答案或者jsfiddle的答案无法工作！

我的问题很简单，我有一个div，点击它会将第二个div向右移动。但是我希望在执行动画时该div不可点击。以下是我的代码：

$("#go").click(function() {
    $("#go").off()
   functionlist["flip"]()
    $("#go").on()
})​

但是这个 div 从来没有变得可点击。难道我对语言的理解非常错误吗？非常感谢！

http://jsfiddle.net/g5mJd/12/

编辑：我希望在动画时避免使元素不可点击，因为我想在单击“运行”时执行其他函数，并在过程中仍然禁用它。 我只是以动画为例。

- curious-cat

---

看起来你的点击事件是在按钮上而不是 div 上。你打算在单击 div 时让它移动，还是你的问题假设正在单击按钮？ - Benjamin Powers

这可能有所帮助 https://dev59.com/pEXRa4cB1Zd3GeqPtq7m - Benjamin Powers

当第二个div被点击时，我打算让一个div实现动画效果。我将重新表述问题以澄清！ - curious-cat

我不明白你的问题... 为什么你要让这个 div 不可点击？因为如果你按下“运行”按钮，当动画执行时，我怎么能点击这个 div 呢？ - Oscar Jara

我希望在“Hello”文本执行其动画时，使“run”按钮无法点击（这不需要是动画，它可以是任何函数）。@Bejamin Powers：谢谢！但是我希望这也适用于非动画情况！（按钮点击关闭、函数、按钮点击打开） - curious-cat

Answer 1

这是一个有趣的问题。让我困惑的是，由于您使用了转换方法，因此无法评估:animated。我已将以下内容添加到您的单击处理程序中，并在此处提供了一个分支：

var functionlist = {
    flip: function() {
        $("#block").transition({
            x: '+=100'
        }, 500, function(){$("#block").attr('data-animating', "false");});
    },
    flop: function() {
        $("#block").transition({
            rotateY: '0deg'
        }, 500)

    }
};


$("#go").click(function() {
    if ($("#block").attr('data-animating') !== "true") {
        console.log($("#block").attr('data-animating'));
        $("#block").attr('data-animating', "true");
        functionlist["flip"]();
    }
});​

- Benjamin Powers

---

由于布尔类型出现了一些意外问题，因此为了提高速度将其转换为字符串。现在应该可以正常工作了。 - Benjamin Powers

我知道我们差不多同时发布了...代码已经被纠正了。 - Benjamin Powers

Answer 2

我认为你对on()和off()的作用有些误解。 on()不会恢复off()删除的点击处理程序，而是会附加一个新的处理程序。您必须提供要附加的处理程序。

请使用此问题的解决方案，而不是使用on()和off()：Make an element unclickable while animated。

- FoolishSeth

---

谢谢您的回答！我更新了我的问题，以澄清为什么我不想使用 (:animated)。那么有没有一种方法可以暂时禁用点击处理程序而不是永久禁用它呢？ - curious-cat

Answer 3

这不是JQuery on/off方法的正确用法。请再次仔细阅读文档。

您应该向on方法传递事件名称和处理程序函数。

$("#id").on("click", function() {});

以及

$("#id").off("click");

- BuddhiP