jQuery切换不适用于持续时间答案

【问题标题】：jQuery toggle not working with durationjQuery切换不适用于持续时间
【发布时间】：2012-06-20 19:27:28
【问题描述】：

我有一个动态生成的面板，当单击触发器时，它会从右侧滑入和滑出。

这是 HTML：

<div id="panel_wrapper">
    <div class="trigger">
        <a id="trigger"></a>
    </div>
    <div id="panel" class="right">
        <div id="panel_nav">
        </div>
    </div>
</div>

这里是 jQuery：

$(div).delegate('#trigger', 'click', function() {
    $('#panel').toggle('fast');
});

作为记录，这在 Firefox 中完美运行。它可以漂亮地滑入和滑出。但是，它在 Chrome 或 Safari 中无法正常工作（尚未在 IE 中测试）。在 Chrome 或 Safari 中测试时，它将成功打开和关闭 ONE 次。之后，它将不再起作用。这是踢球者。如果我没有通过持续时间间隔 |字符串到切换功能，它工作得很好。 $('#panel').toggle();

最初的反应可能是尝试其他滑入和滑出的方式，我向您保证，我已经尝试过了。它们都会产生相同的副作用，即一次正常工作，然后不再起作用。有什么线索可以说明到底是什么问题？

如果需要更多详细信息，请告诉我。提前谢谢！

【问题讨论】：

如果您使用的是 jQ 1.7，如果您使用 .on() 分配您的处理程序有什么不同吗？ api.jquery.com/on
在 Chrome 中工作正常。是否有其他 JavaScript 正在运行？
你的代码在这里工作：jsfiddle.net/5nhxd你能提供更多信息吗？该点击事件还发生了什么？你有重复的身份证吗？
另外，div 是一个变量吗？不应该是$('div')吗？除非那是一个错字。
div 是一个变量。并且有很多 JavaScript 正在进行。有可能是什么东西破坏了它。

标签： html cross-browser jquery jquery-delegate

【解决方案1】：

这是您要查找的内容吗：jsFiddle example。

jQuery

$('div.trigger').on('click', '#trigger', function() {
    $('#panel').toggle('fast');
});

此外，从 jQuery 1.7 开始，.delegate() 已被 .on() 方法取代。

【讨论】：

如果代理不起作用，考虑到.delegate 直接传递给.on，.on 不会有同样的问题吗？

【解决方案2】：

这是你的（不工作）

$(div).delegate('#trigger', 'click', function() {
    $('#panel').toggle('fast');
});

这是我的（工作）

$('div.trigger').delegate('#trigger', 'click', function(e){
    $('#panel').toggle('fast');
});

DEMO.

更好：

$('div.trigger').on('click', '#trigger', function(e) {
    $('#panel').toggle('fast');
});

原因： 有两个 div，由于“委托”，两个 div 都被委托，所以事件触发了两次，但没有指定它，但使用 div.classname 解决了它。 Check this for debugging.

【讨论】：