Untitled

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.redbox
{
    background-color:#F00;
    border:thin solid #C90;
    width: 50px;
    height:50px;

}
.grnbox
{
    background-color:#0F0;
    border:thin solid #C90;
    width: 50px;
    height:50px;

}


</style>
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script language="javascript">
k=0;
$(function()
{
    $(".redbox").click(function(e) {
        if(k%2 == 0)
        {
        $("#container").append("<div class='grnbox'>&nbsp;</div>");
        alert($(".grnbox").length + " green");
        }
        else
        {
        $("#container").append("<div  class='redbox'>&nbsp;</div>");
        alert($(".grnbox").length + " red");
        }
        k++;
    });


    $(".grnbox").on('click',function() {
            alert($(".grnbox").length + " green");
            return true;
            });
});


</script>
</head>
<html>
<body>
<div id="container"><div class = "redbox"></div>  </div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.redbox
{
    background-color:#F00;
    border:thin solid #C90;
    width: 50px;
    height:50px;

}
.grnbox
{
    background-color:#0F0;
    border:thin solid #C90;
    width: 50px;
    height:50px;

}


</style>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script language="javascript">
k=0;
$(function()
{
    $(".redbox").click(function(e) {
        if(k%2 == 0)
        {
        $("#container").append("<div class='grnbox'>&nbsp;</div>");
        }
        else
        {
        $("#container").append("<div  class='redbox'>&nbsp;</div>");
        }
        k++;
    });


    $(".grnbox").on('click',function() {
            alert($(".grnbox").length + " green");
            return true;
            });
});


</script>

</head>

<body>

<div id="container"><div class = "redbox"></div>  </div>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
.redbox
{
    background-color:#F00;
    border:thin solid #C90;
    width: 50px;
    height:50px;

}
.grnbox
{
    background-color:#0F0;
    border:thin solid #C90;
    width: 50px;
    height:50px;

}


</style>
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script language="javascript">
k=0;
$(function()
{
    $(".redbox").click(function(e) {
        if(k%2 == 0)
        {
        $("#container").append("<div class='grnbox'>&nbsp;</div>");
        }
        else
        {
        $("#container").append("<div  class='redbox'>&nbsp;</div>");
        }
        k++;
    });


    $("#container").on('click',".grnbox",function() {
            alert($(".grnbox").length + " green");
            return true;
            });
    $("#container").on('click',".redbox",function() {
            alert($(".redbox").length + " red");
            return true;
            });

});


</script>

</head>

<body>

<div id="container"><div class = "redbox"></div>  </div>
</body>
</html>