CODEWITHSUNDEEP
javascriptjqueryhtml
Stoic Developer
Stoic Developer

Reputation: 101

select the last added element using JQuery

So I have a simple bit of code. Nothing serious, or life-threatening. I'm just trying to use JavaScript to fill out an empty html file with some basic 100x100 elements by clicking on the last element created. Problem is: I can't actually get my code to register the last element created, only the last initial element. What could I be doing wrong?

<!DOCTYPE html>
<html>
<head>
    <title>Container Rainbow</title>
    <style type="text/css">
        div{ width:100px;height:100px; }
        #head{ background-color:rgba(100,0,100,.8);}
        #wrapper{width:100%;height:auto;}
        div#wrapper > div{float:left;}
    </style>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
    <script type="text/javascript">
        var lastDiv;
        var rgba = new Array();
        rgba[0] = 110; rgba[1] = 0; rgba[2] = 110; rgba[3] = 1;
        $(document).ready(function(){
            lastDiv = $("div").last();
            lastDiv.on("click", function(){
            rgba[0] += 5;
            rgba[2] += 5;
            var newDiv = $("<div></div>")
                    .addClass("hatchling")
                    .css("background-color", "rgba("+rgba[0]+",0,"+rgba[2]+",1)")
            $(this).after(newDiv);
            lastDiv=newDiv;
        });
    });
</script>
</head>
<body>
<div id="wrapper">
    <div id="head"></div>
</div>
</body>
</html>

Upvotes: 0

Views: 87

Answers (2)

Tomas Santos
Tomas Santos

Reputation: 550

I prefer to reduce my dependency on globe variables when possible. Here is an alternative answer.

Feddle Demo

JavaScript :

var handleClick     =    function() 
                         {
                             var $this       = $(this);
                             var $newDiv     = $('<div></div>');
                             var rgba        =  $this.css('background-color').match(/\d+/ig);

                             rgba[0] = parseInt(rgba[0], 10) + 5;
                             rgba[2] = parseInt(rgba[2], 10) + 5;

                             $newDiv.addClass("hatchling");
                             $newDiv.css("background-color", "rgba("+rgba[0]+","+rgba[1]+","+rgba[2]+",1)");

                             $(this).after($newDiv);                           
                        };

$("#wrapper").on("click", "div:last", handleClick);

Upvotes: 0

Krasimir
Krasimir

Reputation: 13529

Here is a code that you may use and jsfiddle demonstrating how it works http://jsfiddle.net/krasimir/K2dyd/

var lastDiv;
var rgba = new Array();
rgba[0] = 110; rgba[1] = 0; rgba[2] = 110; rgba[3] = 1;

var divClick = function() {
    rgba[0] += 5;
    rgba[2] += 5;
    var newDiv = $("<div></div>")
    .addClass("hatchling")
    .css("background-color", "rgba("+rgba[0]+",0,"+rgba[2]+",1)")
    $(this).after(newDiv);
    lastDiv.off("click");
    lastDiv=newDiv;
    lastDiv.on("click", divClick);
}

lastDiv = $("div").last();
lastDiv.on("click", divClick);

The idea is to attach the onclick event to the latest div. In your code you create the div and assign it to lastDiv, but there is no event handler attached.

Upvotes: 2

Related Questions