Question

I have a div to show/hide on click and this div will load content from me.html via ajax load. I am adding a class class added to this a tag and then when I click again on a tag with added class, it should hide the div. But this doesn’t work.

$(function() {
    $("#nav a").click(function() { 
        $(this).toggleClass('added');
        if($(".o1").length <= 0) { 
            $("body").append('<div class="o1"></div>');
            $(".o1").load("me.html").css("display","block");
        }
        $(".added").click(function() { 
            $(".o1").css("display","none");
        })
    });
});

Any ideas?

Answer 1

Try this. This will setup the object if it doesn’t exist. Then once it does it will toggle it if for future clicks.

$(function() {
    $("#nav a").click(function() { 
        $(this).toggleClass('added');
        if($(".o1").length <= 0)
        { 
            $("body").append('<div class="o1"></div>');
            $(".o1").load("me.html");
        } else if($(this).hasClass("added"))
            $(".o1").hide();
        } else {
            $(".o1").show();
        }
    });
});

Adding a click handler to all .added links with your code would create a problem, because in your code you have.

This shows the timeline of what is happening. Hope you can follow. The numbers in brackets are events. The same number signifies they happen at the same time.

(1) #nav a is clicked then #nav a gets a class of added then .o1 is added then any link with added class gets a click event

(2) #nav a is clicked then #nav a removes class of added then .o1 already exists then any link with added class gets a click event (but not this link, but it still has the previous click event, because it wasn’t dettached)

(2) .added is also considered clicked at the same time as action above because it was attached during (1)

(3) #nav a is clicked then #nav a gets a class of added then .o1 already exists then any link with added class gets a click event

(3) .added is also considered clicked at the same time as action above because it was attached during (1)

(4) #nav a is clicked then #nav a gets a class of added then .o1 already exists then any link with added class gets a click event

(4) .added is also considered clicked at the same time as action above because it was attached during (1)
(4) .added is also considered clicked at the same time as action above because it was attached during (3)

etc …

The key thing to grasp is you are not detaching click events, instead you are attaching more and more.