jQuery toggle not working with duration

Question

I have a dynamically generated panel that slides in and out from the right when a trigger is clicked.

Here is the 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>

Here is the jQuery:

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

For the record, this works perfectly in Firefox. It slides in and out beautifully. However, it does not work as expected in Chrome or Safari (have yet to test in IE). When tested in Chrome or Safari, it will open and close successfully ONE time. After that, it will no longer function. Here is the kicker. If I do not pass a duration interval | string to the toggle function, it works just fine. $('#panel').toggle();

Initial reaction might be to try other ways to slide in and out, and I assure you, I've tried it. They all produce the same side-effects of working correctly one time, and then no longer functioning. Any clues as to what in the hell could be the issue?

Please let me know if more detail is needed. Thanks ahead of time!

If you're using jQ 1.7, does it make any difference if you assign your handler using .on()? http://api.jquery.com/on/ — Jasper Mogg, Jun 20 '12 at 19:32
Works fine in Chrome here. Do you have other JavaScript running? — j08691, Jun 20 '12 at 19:34
Your code works here: http://jsfiddle.net/5nhxd/ can you provide more information? What else is happening on that click event? do you have duplicate id's? — Kevin B, Jun 20 '12 at 19:34
Also, is `div` a variable? Shouldn't it be `$('div')`? Unless that's a typo. — j08691, Jun 20 '12 at 19:36
div is a variable. and there is a lot of JavaScript going on. It is possible that something is breaking it. — Brett, Jun 20 '12 at 19:38
At this point we know that it isn't an issue of `.delegate` vs `.on` vs `.live` and that `div` isn't the issue. When you change to `.toggle()`, it works, but `.toggle('fast')` doesn't. That is animation vs no animation. Do you have any other animations happening? What else is happening within that click event? — Kevin B, Jun 20 '12 at 19:48

score 4 · Answer 1 · answered Jun 20 '12 at 19:38

4

Is this what you're looking for: jsFiddle example.

jQuery

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

Also, as of jQuery 1.7, .delegate() has been superseded by the .on() method.

answered Jun 20 '12 at 19:38

j08691

204,283
31
260
272

1

If delegate isn't working, wouldn't `.on` have the same issue considering `.delegate` passes straight through to `.on`? – Kevin B Jun 20 '12 at 19:43

The Alpha · Answer 2 · 2012-06-20T19:50:07.370

This is your (not working)

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

This is mine (working)

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

DEMO.

Better:

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

Reason: There are two divs and because of 'delegate' both divs were delegated so event fired twice without specifying it but using div.classname solved it. Check this for debugging.

jQuery toggle not working with duration

2 Answers2