Why can I not hide an element on click using jQuery?

Question

I want to let a div show and disappaer with jquery and css. The code does not work:

HTML

<html>
    <head>

    </head>
    <body>
        <div class="box" id="b1">
            <a href="#">click to show content</a>

            <div class="content">
                here is content here is content here is content
                <div class="button" id="b2">remove content</div>
            </div
    </body>
</html>

jQuery

$(document).ready(function() {
    $('#b1').click(function() {

        $('.content').css({
            "display": "block"
        });
    });

    $('#b2').click(function() {

        $('.content').css({
            "display": "none"
        });
    });
});

Demo: http://jsfiddle.net/jTgRF/41/

The div tag of class "content" is not closed properly. Just mentioned , though its not the cause of the error. — ASKN, Jun 24 '12 at 16:05

score 4 · Accepted Answer · edited Jun 20 '20 at 09:12

The problem is that you don't stop the event from propagating.

When you click the button it actually hide the element at first, but the event propagate up to the parent element, at which you catch the click and show it again. It goes so fast it looks like nothing is happening, but actually when you click on #b2, the elements get hidden, the event then bubble up to the parent #b1, to which you have attached click-event listener to show the content.

Therefor, you need to use .stopPropagation() on #b2.

$(document).ready(function(){
     $('#b1').click(function(){
           $('.content').show();
    });
    
    $('#b2').on("click", function(e){ 
           $('.content').hide();
            e.stopPropagation();
    });
});

What you need to do is to pass the click event to the call-backfunction (declared e in my example) and then call stopPropagation() on it to make sure that it doesn't bubble up to the parent element.

Here is a working example: http://jsfiddle.net/jTgRF/64/

Note I use .show() and .hide(), which is exactly the same as what you do with .css(), but is more readable in my opinion.

Edit:

As noted by Venu in his answer, the content will show if you click on the black-area as well, not just the "show content"-text. The easiest way to solve that would be to just move the id="b1" attribute from the div with class content and put it on the a-element instead.

See my updated fiddle: http://jsfiddle.net/jTgRF/65/

Venu · Answer 2 · 2012-06-24T14:37:00.767

2

since, you are attaching an event for an element which is not available in dom, event wont get attached to the element. Use live

$('#b2').live('click', function(){

               $('.content').css({"display":"none"});
        });

Attach an event handler for all elements which match the current selector, now and in the future.

EDIT
1)Use on instead of live as Live is deprecated.

2) There is one more issue with your css. you have set height to 150px for box class. so if you click on black area also, event gets fired.

So move the b2 element outside b1, this would solve the event propagation to the parent-element also.

edited Jun 24 '12 at 14:37

answered Jun 24 '12 at 14:11

Venu

7,243
4
39
54

2

This is not the problem, the element is in the DOM at load, it just isn't shown. The problem is that the event propagates to the parent-element, which shows the content immediately again. See my answer for more info. – Christofer Eliasson Jun 24 '12 at 14:27
@ChristoferEliasson I agree with you. But There is one more issue with his css. he has set height to 150px for box class. so if you click on black area also, event gets fired. So move the b2 element outside b1, this would solve the event propagation to the parent-element also. – Venu Jun 24 '12 at 14:41
That is true, as you probably want to keep the height on the .content-element, the easiest way to solve that would be to move the `id="b1"` to the `a`-element instead. – Christofer Eliasson Jun 24 '12 at 14:44

score 1 · Answer 3 · answered Jun 24 '12 at 14:19

You need to change the button click handler to

$('#b2').click(function(e){
           e.stopPropagation();
           $('.content').css({"display":"none"});
    });

You need to add event.stopPropagation() Or click event will be propagated to the parent div and .content will be hidden immediately again.

Demo: http://jsfiddle.net/joycse06/jTgRF/56/

You should use jQuery .show() and .hide() to show/hide elements.

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

1

Venu's anwser works but live() is depracated.

You should use on() instead :

jQuery .on function for future elements, as .live is deprecated

Code

$(document).ready(function(){
    $('#b1').click(function(){
        $('.content').css({"display":"block"});
    });

    $(document).on('click', '#b2', function(){
        $('.content').css({"display":"none"});
    });
});

Hope this helps

edited May 23 '17 at 12:12

Community

1
1

answered Jun 24 '12 at 14:20

Titouan de Bailleul

12,920
11
66
121

`.live()` is deprecated in favor of `.on()` indeed, but that is not the issue. The element is available in the DOM at load-time. The problem is event-propagation. See my answer. – Christofer Eliasson Jun 24 '12 at 14:29
Also, this should probably have been a comment or an edit to Venu's answer, instead of a new answer all together. – Christofer Eliasson Jun 24 '12 at 14:36

Why can I not hide an element on click using jQuery?

4 Answers4