Add class to dynamically added elements

Question

I have a function that parses a JSON string and generates a grid of tiles. The grid width and height is set in the JSON, as well as the coordinates of "special tiles" like obstacles.

Thing is, the function that parses the JSON generates the map but doesn't add the "obstacle" class on tiles because they are dynamically added.

My function to parse the JSON :

            $('#json-result textarea').change(function(){

                $.each($.parseJSON($(this).val()), function (item, value) {
                    if(item == 'name') { $('#name').val(value); }
                    if(item == 'width') { $('#width').val(value); }
                    if(item == 'height') { $('#height').val(value); }

                    generateMap();

                    if (item == 'obstacles') {
                        $.each(value, function (i, object) {

                            console.log('[data-x="' + object['x'] + '"][data-y="' + object['y'] + '"]');
                            var obs = $('#map-preview').find('[data-x="' + object['x'] + '"][data-y="' + object['y'] + '"]');

                            console.log(obs);
                            obs.addClass('obstacle');


                        });
                    }

                });

            });

The generateMap function is here and generates the grid. It gets values of height and width in input boxes because the process is also "reverse".

function generateMap(){
    $('#map-preview').html('');

    var height = $('#height').val();
    var width = $('#width').val();

    for(h = 0 ; h < height ; h++) 
    {
          for(w = 0 ; w < width ; w++)
          {
               $('#map-preview').append('<div class="tile" data-x="' + w + '" data-y="' + h + '"></div>');
          }

          $('#map-preview').append('<br />');
    }
}

The HTML generated is inside the map-preview div. The map-preview div is there at the beginning and is empty. The "tiles" are added dynamically.

<div id="map-preview">
    <div class="tile" data-x="0" data-y="0"></div>
    <div class="tile" data-x="1" data-y="0"></div>
    <div class="tile" data-x="2" data-y="0"></div>
    <div class="tile" data-x="3" data-y="0"></div>
    <br>
    <div class="tile" data-x="0" data-y="1"></div>
    <div class="tile" data-x="1" data-y="1"></div>
    <div class="tile" data-x="2" data-y="1"></div>
    <div class="tile" data-x="3" data-y="1"></div>
    <br>
    <div class="tile" data-x="0" data-y="2"></div>
    <div class="tile" data-x="1" data-y="2"></div>
    <div class="tile" data-x="2" data-y="2"></div>
    <div class="tile" data-x="3" data-y="2"></div>
    <br>
</div>

So, in the first snippet of code, I try to add a class to the obstacle tiles, but nothing is done. When I try to type the same code in the Chrome console it works but not in code.

I tried with and without .find(), but nothing works.

can you show your json as well ?

Gabriele Petrioli
– Gabriele Petrioli

2016-03-09 16:51:52 +00:00
Commented Mar 9, 2016 at 16:51 — Gabriele Petrioli
– Gabriele Petrioli, Commented Mar 9, 2016 at 16:51

Gabriele Petrioli · Accepted Answer · 2016-03-09 16:55:32Z

1

Most likely the generateMap(); should be called outside of the .each() because now on each iteration of $.each($.parseJSON($(this).val()), function (item, value) { the map is regenerated and thus removes all previous alterations.

answered Mar 9, 2016 at 16:55

Gabriele Petrioli

197k35 gold badges275 silver badges331 bronze badges

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

1 Comment

Gawel91 Over a year ago

Oh you're right... I fixed this by placing the GenerateMap function inside a condition and now it works. The sad thing in this story is I spent a few hours trying to fix this, I thought it was because dynamic element not yet present in the DOM. And also a collegue helped me and didn't managed to know either. Thanks a lot!

Collectives™ on Stack Overflow

Add class to dynamically added elements

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related