Q:

clickable div is not working

I want div2 to be clickable. However it is not working. What am I doing wrong here?  
(Code has been updated after reading comments)
Note  : If I set div3 as clickable, it is working. changing back to div2 doesnt work. div1 also doesnt work.
<!DOCTYPE html>
<html lang="en" >
<head>
    <title>Test Code</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <style type="text/css">

        .div1 {
            position: fixed; 
            width: 250px; 
            height: 80%; 
            border-style: solid; 
            overflow: hidden;
        }
        .div2 {
            position: fixed; 
            width: 240px; 
            height: 50px; 
            border-style: solid; 
            overflow: hidden;
        }

        .div3 {
            position: fixed; 
            width: 100%; 
            height: 80%; 
            border-style: solid;
        }
    </style>
</head>

<body>
    <div >
        <div >
            <div class="div1" >
                <div class="div2" id="item" >
                    This div should be clickable
                </div>
            </div>
            <div class="div3">
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            $(".div2").click(function() {
                window.alert("sometext");
                $('.div3').html(function() {
                    var emph = '<em>' + $('p').length + ' paragraphs!</em>';
                    return '<p>All new content for ' + emph + '</p>';
                });
            });
        });
    </script>
</body>
</html>         

A:

Put a space in your selector (.div1 .div2). Currently you're selecting for an element that has both div1 and div2 classes.
Wrap your code in $(function() { ... }); to fire it when the DOM is ready.
div3 is styled to cover both div1 and div2. Give div1 z-index: 1 to make it sit above div3.

Here's a working example

A:

By placing your jQuery code before the actual element, the jQuery code does not yet know that .div2 is in the DOM.
Try either wrapping your jQuery code in $(document).ready() or moving it below those elements. And also, put a comma to separate your elements in your click function.
$(document).ready(function(){
        $(".div1, .div2").click(function() {
            window.alert("sometext");
            $('.div3').html(function() {
                var emph = '<em>' + $('p').length + ' paragraphs!</em>';
                return '<p>All new content for ' + emph + '</p>';
            });
        });
});

