create boxes with a div using jquery

Question

I am trying to convert this old javascript into jquery in order to learn jquery.

The goal of the old javascript was to add a box to the page when the button "add box" is clicked. when the box itself is clicked on, display a unique id.

I am stuck on how to correctly code the div, and add a box onto it.

HTML:

<!DOCTYPE html>
<html>
    <head>
        <title>E10W12</title>
        <meta charset="UTF-8">
        <style>
        .clrBox { 
            background-color: orange;
            width: 50px;
            height: 50px;
            margin: 10px;
        }
        </style>
        <script src="jquery-2.0.3.js"></script>
        <script src="E10W12.js"></script>
    </head>
    <body>
        <form>
            <input type="button" id="addButton" value="Add Box">
        </form>

    </body>
</html>

Old Javascript:

window.onload = init;

var i= 0;

function init() {
    var button = document.getElementById("addButton");
    button.onclick = handleButtonClick;
}

function handleButtonClick(e) { 
    i++;
    var div = document.createElement("div");
    div.setAttribute("class","clrBox");
    div.setAttribute("id","Box"+i);
    div.onclick=function(){handleBoxClick(div);}
    var body = document.getElementsByTagName("body");
    body[0].appendChild(div);
}

function handleBoxClick(el){
    alert(el.id);
}

New JQuery to replace Javascript:

var i = 0;

$(function() {
    $( '#addButton').click(function(){
        i++;

        Not sure what to do here?

    });
});

Alright, I got it using the two answers provided below. Thanks guys!

Solution:

$(function() {

var i = 0;

    $( '#addButton').click(function(){
        i++;
        $('<div/>', {
            'id': 'Box' + i,
            'class': 'clrBox'
        }).appendTo('body');


        $("div").click(function () {
             alert(this.id);
        })
    });
});

Rajaprabhu Aravindasamy · Accepted Answer · 2013-11-25 20:11:27Z

1

Try this,

$('<div/>', {
    'id': 'Box' + i,
    'class': 'clrBox',
    click: function(){handleBoxClick($(this));}
}).appendTo('body');

DEMO

For further reading.

edited Nov 25, 2013 at 20:11

answered Nov 25, 2013 at 20:05

Rajaprabhu Aravindasamy

67.2k17 gold badges107 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

user2961971 Over a year ago

works perfect. sadly whenever I click on a box it doesn't display the id. This is the format that I have it: var i = 0; $(function() { $( '#addButton').click(function(){ i++; $('<div/>', { 'id': 'Box' + i, 'class': 'clrBox', click: function(){handleBoxClick(div);} }).appendTo('body'); }); function handleBoxClick(el){ alert(el.id); } });

user2961971 Over a year ago

a little better. however whenever i click the box it now the alert says "unidentified"

Howard Renollet Over a year ago

Per OP - "The goal of the old javascript was to add a box to the page when the button "add box" is clicked. when the box itself is clicked on, display a unique id" This is not a full solution to the original question asked.

Rajaprabhu Aravindasamy Over a year ago

@user2961971 you are receiving a jquery object, It doesn't has a direct property called id. You have to use .attr('id') to retrieve that. Try out my demo.

Surya Narayan · Accepted Answer · 2013-11-25 20:30:51Z

1

This might help you

$(function(){
    var id = 0;
    $('#addButton').click(function(){
        id++;
        $('<div />', {
            'id' : 'box ' + id,
            'class': 'clrBox',
            click : function(){
                $(this).html($(this).attr('id'));
            }            
        }).appendTo('body');
    });
});

jsFiddle

answered Nov 25, 2013 at 20:30

Surya Narayan

5582 silver badges17 bronze badges

Comments

Howard Renollet · Accepted Answer · 2013-11-25 20:14:10Z

0

UPDATED: http://jsfiddle.net/XZK95/1/

            var i = 0
            $("#addButton").click(function () {
                i++
                $("#myForm").append("<div id=\"Box" + i + "\"></div>");
                $("div").click(function () {
                    $(this).html(this.id);
                })
            });

edited Nov 25, 2013 at 20:14

answered Nov 25, 2013 at 20:08

Howard Renollet

4,7392 gold badges26 silver badges31 bronze badges

Collectives™ on Stack Overflow

create boxes with a div using jquery

3 Answers 3

DEMO

4 Comments

Comments

UPDATED: http://jsfiddle.net/XZK95/1/

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

UPDATED: http://jsfiddle.net/XZK95/1/

Comments

Your Answer

Sign up or log in

Post as a guest

Related