将类添加到动态添加的元素

Question

我有一个解析JSON字符串并生成图块网格的函数。 在JSON中设置网格的宽度和高度，以及障碍物等“特殊图块”的坐标。

事实是，解析JSON的函数会生成地图，但不会在图块上添加“障碍”类，因为它们是动态添加的。

我解析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');


                        });
                    }

                });

            });

generateMap函数在此处并生成网格。 它在输入框中获取高度和宽度的值，因为该过程也是“反向”的。

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 />');
    }
}

生成的HTML位于map-preview div中。 map-preview div位于开头，并且为空。 “平铺”是动态添加的。

<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>

因此，在第一段代码中，我尝试向障碍图块添加一个类，但是什么也没做。 当我尝试在Chrome控制台中键入相同的代码时，它可以工作，但不能在代码中工作。

我尝试使用和不使用.find（），但是没有任何效果。

Answer 1

最有可能的generateMap(); 应该在.each()之外调用，因为现在在$.each($.parseJSON($(this).val()), function (item, value) {每次迭代中$.each($.parseJSON($(this).val()), function (item, value) {地图会重新生成，因此会删除所有先前的改变。