jquery toggle is toggling twice

Question

I have a div element containing a few other divs with an id of #popup_inner_wrapper.

When I use the JS console in chrome:

$('#popup_inner_wrapper').toggle("fast");

It hides the div, but then shows it again.

If I hide the div at page load with css, then toggle it from the console the div will show. If I then toggle again from the console it will hide and show again in one action.

What could be causing this behavior?

EDIT:

HTML is similar to the code below. In response to it being a double binding issue: there are no events bound anywhere: I am calling toggle form the console and seeing the 'fired twice behavior'...

<div class="popup_outer_wrapper">
   <a href="#" id="toggle_link">Show/hide</a>  # nothing is bound to this link atm!
   <div id="popup_inner_wrapper">
     <div class="popup_body">
       contents..
     </div>
   </div>
</div>

UPDATE:

It seems i might be encountering the same problem as described here: JQuery Toggle not working as it should. The problem being some of those divs are positioned absolute. For some reason .toggle() will not work with absolute positioned divs.

Can anyone confirm?

You've double initialized, or double bound to something. Include a link please. — Sinetheta, Nov 01 '11 at 20:56
Thanks Sinetheta. You nailed it for me. I was setting the click event every time my ajax returned something rather than once for the entire page. My fix was to use $(".ui-icon").live("click",function(){ // set toggle event in here }); — Flat Cat, Dec 20 '12 at 03:07

score 1 · Accepted Answer · edited May 23 '17 at 12:18

1

It seems i might be encountering the same problem as described here: JQuery Toggle not working as it should. The problem being some of those divs are positioned absolute. For some reason .toggle() will not work with absolute positioned divs.

edited May 23 '17 at 12:18

Community

1
1

answered Dec 19 '11 at 19:09

ErwinM

5,051
2
23
35

jquery toggle is toggling twice

1 Answers1