jquery ajax load toggle hide not working

$(function () {

    $("li.login a").click(function(){
        $('#loginActive, #loginBox').toggle();
        $("#loginForm").load("login.html");
    });

});

That's my code, basically its a simple drop down login which 开发者_运维技巧I want to call the login.html with jquery.

All works fine when showing the toggled content but when it comes to closing it, it just doesn't.

If i take the load out, the toggle works fine.

Any suggestions?

Your login page is the same as the index..

The actual problem is that you are reloading scripts and re-assigning the events in the page. this causes two events to exist on the login link.

So next click will create two toggles, cancelling each other out. (and re-assign the events again two more times.. next click runs 4 times... etc)

Your login page should either hold just the actual form, or you should use the .load('url #id') syntax to filter the returned data to a specific section of the returned page..