javascript - jQuery toggle running twice - Stack Overflow

admin管理员组

文章数量:1321433

It seems that this code:

$(function(){
    $('.show_hide_login').toggle(
    function (){
            alert('show');
            $("div#fullpage").show();
            $("div#loginbox").show();
        },
  function (){
            alert('hide');
            $("div#loginbox").hide();
            $("div#fullpage").hide();
        }
  ); });

Any idea on why it would be running twice when I click on either link (two, one is a div and one is an anchor)?

It seems that this code:

$(function(){
    $('.show_hide_login').toggle(
    function (){
            alert('show');
            $("div#fullpage").show();
            $("div#loginbox").show();
        },
  function (){
            alert('hide');
            $("div#loginbox").hide();
            $("div#fullpage").hide();
        }
  ); });

Any idea on why it would be running twice when I click on either link (two, one is a div and one is an anchor)?

• javascript
• jquery

Share Improve this question Follow asked Sep 9, 2010 at 23:03 NathanNathan 8111 silver badge22 bronze badges 1

• 1 Is it possible your script above is running twice? Put an alert before the .toggle() call to see if that's the case. – Nick Craver Commented Sep 9, 2010 at 23:11

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 5

How many elements do you have with the .show_hide_login class? I'll guess you have two of those. In which case, $('.show_hide_login') result contains two elements, and toggle() is executed for each of them.

This isn't an answer to your question, but you could clean up your code a bit like so:

$(function() {
    $('.show_hide_login').toggle(
    function() {
        alert('show');
        $("#loginbox,#fullpage").show();
    }, function() {
        alert('hide');
        $("#loginbox,#fullpage").hide();
    });
});

As to your actual problem, I suspect Nick's guessed the culprit. Check out this demo to see the result of binding the same event twice: http://jsfiddle/9jPLv/

In addition to adding an alert prior to the binding of the toggle event, you could add in an unbind() and see if that solves the problem, like so:

$('.show_hide_login').unbind().toggle(

If that solves it, the toggle binding is definitely being run twice, so you'd just have to figure out why.

my answer is just a kind of checkpoint,i had the same issue but for different reason. I did include the script file in base page as well as child page. this resulted in toggle running twice if you have this problem check that the script is added only once.

It might be the same issue i was having.

so if you got an element with a script tag in it - then you move that containing element or wrap it with another tag in jquery - then the ready function in jquery is executed again - thus binding a second toggle function to your element.

as suggested $('.show_hide_login').unbind().toggle( is a workaround that does work, but better to try moving your javascript code to the head or bottom of the page.

本文标签： javascriptjQuery toggle running twiceStack Overflow