jQuery 切换与持续时间不起作用

Question

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

这是 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中测试时，它将成功打开和关闭一次。之后，它将不再起作用。这是踢球者。如果我没有通过持续时间间隔 |字符串到切换功能，它工作得很好。 $('#panel').toggle();

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

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

Answer 1

这是你要找的吗：jsFiddle 示例。

jQuery

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

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

Answer 2

这是

你的（不工作）

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

这是我的（工作）

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

演示。

更好：

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

原因：有两个div，由于"委托"，两个div 都被委派了，因此事件触发了两次而没有指定它，但使用 div.classname 解决了它。检查此内容以进行调试。