CODEWITHSUNDEEP
jquery
kimbebot
kimbebot

Reputation: 897

div click event not working

I have this simple code that append a div inside the body, 

<!DOCTYPE html>
<html>


    <head>
        <script type="text/javascript" src='/libs/jquery/jquery.js'></script>
        <script>
            $(document).ready( function() {
                $('#show').click( function() {
                    $("<div id='fade'></div>").appendTo('body');
                    $('#fade').fadeIn('fast');
                });

                $('#fade').click( function() {
                    $('#fade').remove('fast');
                });
            });
        </script>
    </head>

    <body>
        <div>
            <input type="button" value="show" id="show"/>
        </div>
    </body>
</html>

css

#fade {
    display: none;
    background: black;
    opacity:0.4;
    filter:alpha(opacity=50);
    z-index: 1;
    position: fixed;
    left: 0; top: 0;
    width: 100%; height: 100%;
}

#window {
    width: 440px;
    height: 356px;
    background: white;
    position:fixed;
    left:50%;
    top:30%;
    margin:-70px 0 0 -245px;
    z-index: 2;
}

Appending my div#fade is working fine, but my click event on #fade isn't working. I looks simple but I didn't know why isn't working fine.

Upvotes: 2

Views: 10758

Answers (6)

Bob
Bob

Reputation: 1497

.remove() in jquery only accept selector as parameter 

            $('#show').click( function() {
                $("<div id='fade'></div>").appendTo('body');
                $('#fade').fadeIn('fast');

                $('#fade').click( function() {
                    $(this).remove();
                });
            });

DEMO

Upvotes: 1

Imdad
Imdad

Reputation: 6042

Working solution at http://jsfiddle.net/ffK3u/1/

$(document).ready( function() {
                $('#show').click( function() {
                    $("<div id='fade'></div>").appendTo('body');
                    $('#fade').fadeIn('fast');
                });

                $(document).on("click","#fade", function() {
                    $('#fade').fadeOut("slow",function(){
                        $('#fade').remove();
                    });
                });
            });

Upvotes: 5

YangHongChang
YangHongChang

Reputation: 76

<!DOCTYPE html>
<html>


    <head>
        <script type="text/javascript" src='jquery-1.7.1.min.js'></script>
        <script>
            $(document).ready( function() {
            alert($('#show'));
                $('#show').click( function() {
                    alert(0);//this code already execution,prove click event not problem.
                    $("<div id='fade'></div>").appendTo('body');//issue here 'body' replace document.body
                    $('#fade').fadeIn('fast');
                });

                $('#fade').click( function() {
                    $('#fade').remove('fast');
                });
            });
        </script>
    </head>

    <body>
        <div>
            <input type="button" value="show" id="show"/>
        </div>
    </body>
</html>

Upvotes: 0

xdazz
xdazz

Reputation: 160943

THE DEMO.

You don't need to create a new div every time, just cache it in a local variable.

Using .on will work, but not necessary.

var fade = $("<div id='fade'></div>").click(function () {
    $(this).fadeOut('fast');
});

$('#show').click(function () {
    fade.appendTo('body').fadeIn('fast');
});

Upvotes: 2

Aaron Walker
Aaron Walker

Reputation: 195

If you want it to fade out, do this:

$('#fade').click( function() {
    $('#fade').fadeOut('fast');
});

Upvotes: 0

Ben Everard
Ben Everard

Reputation: 13804

Assuming you're using jQuery 1.7 you can use .on() to delegate the click to the document level.

$(document).on('click', '#fade', function() {
    $('#fade').remove('fast');
});

Basically you cannot set a click handler for an element that doesn't yet exist, however you can delegate the click to a parent, in this instance document. When document receives the click it'll check to make sure it came from #fade and do whatever you need it to do.

This method is the newer and better version of .live(), of which you may or may not have seen used to bind events to elements that are dynamically inserted into the DOM.

For further reading, this technique relies on event bubbling and event delegation.

Upvotes: 3

Related Questions