How to fetch the id of dynamically generating divs and display a message by using that id?

Question

How to fetch the id of the dynamically generating div from the following fiddle http://jsfiddle.net/ramapriya/FJhDw/2/ and display distinct message, if we click on each div

function get_random_color() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

var columns = 10, container = $("#container"), width = (100 / columns);

$("head").append("<style>.col { width: " + width + "%;} .row {  height: " + width + "%  }</style>");

for(var ii = 0; ii < columns; ii++) {
    container.append("<div class=\"row\" />");
    row = $("#container > div:last-child");

    for(var i = 0; i < columns; i++) {

        row.append("<div class=\"col\" style=\"background: " + get_random_color() + "\">szin</div>");

    }
}

I can't see any dynamically created `id` attribute in your example. — Onkel Toob, Sep 17 '13 at 10:38
You mean on click on DIVs .col, your DIVs don't have any id, otherwise, as you are using jq 1.6.4 in jsfiddle, you should delegate event using .delegate() method or worst, set click handler for each .col — A. Wolff, Sep 17 '13 at 10:38
Check this, it might help you http://stackoverflow.com/questions/4825295/javascript-onclick-to-get-the-id-of-the-clicked-button — Nitish, Sep 17 '13 at 10:40
I think you have to set ids of Div elements at the time of their generation and also have to bind a function to show message on their click. — Rajesh Dhiman, Sep 17 '13 at 10:42

score 0 · Answer 1 · answered Sep 17 '13 at 10:42

Hey use this it will generate dynamic ids and when you click any div it will show the alert with that div id :-

row.append("<div id=\"div_" + ii + "_" + i + "\" onclick=\"alert(this.id)\" class=\"col\" style=\"background: " + get_random_color() + "\">sample</div>");

Here is the fiddle:- http://jsfiddle.net/FJhDw/5/

Ashwani · Answer 2 · 2013-09-17T10:58:32.403

0

To specify div you should provide an id to each div and you can execute a javascript function to each div at creation time.

Ex: On click if you need id of div then you can add onclick attribute to div and pass it to function

See Demo

updated: Demo 2

edited Sep 17 '13 at 10:58

answered Sep 17 '13 at 10:46

Ashwani

3,463
1
24
31

id should be unique but in your demo i am getting repeated id of first row to all the remaining rows. – user2089987 Sep 17 '13 at 10:55
Id is "myDiv" apppending div number. I checked it. e.g: myDiv0, myDiv1 etc. @user2089987 – Ashwani Sep 17 '13 at 10:56
Your "ID" is the same for all the divs in the same column, meaning it's not an "ID" – nbrooks Sep 17 '13 at 10:57

score 0 · Accepted Answer · answered Sep 17 '13 at 10:51

Please do not use the onclick attribute; that does not belong in your HTML, because it has nothing to do with layout or appearance. Keep your functionality in the JS where it belongs. Simply implement an ID scheme using your iterators, as below, and define a click handler.

See this example at http://jsfiddle.net/XXd6z/. Also, note that I've cleaned up your element generation, which was difficult to read before. jQuery makes it easy to create nice-looking elements on the fly.

var columns = 10,
    container = $("#container"),
    width = (100 / columns);

$("head").append("<style>.col { width: " + width + "%;} .row {  height: " + width + "%  }</style>");

for (var ii = 0; ii < columns; ii++) {
    var $row = $("<div />", {
        class: "row"
    });
    container.append($row);

    for (var i = 0; i < columns; i++) {
        var $col = $("<div />", {
            class: "col",
            style: "background: " + get_random_color() + ";",
            html: "sample",
            id : ii + "-" + i
        });
        $row.append($col);
    }
}

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

How to fetch the id of dynamically generating divs and display a message by using that id?

3 Answers3