將類添加到動態添加的元素

我有一個函數可以解析JSON字符串並生成一個網格。柵格寬度和高度在JSON中設置，以及「特殊瓷磚」像障礙物的座標。將類添加到動態添加的元素

問題是，解析JSON的函數會生成地圖，但不會在tile上添加「障礙物」類，因爲它們是動態添加的。

我的函數來解析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內。地圖預覽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（），但沒有任何工作。

來源

2016-03-09 Gawel91

你可以展示你的json嗎？ –

最有可能的generateMap();應該在.each()之外調用，因爲現在在$.each($.parseJSON($(this).val()), function (item, value) {的每次迭代中都會重新生成映射並因此刪除以前的所有更改。

來源

2016-03-09 16:55:32

哦，你是對的......我通過將GenerateMap函數放入一個條件來解決這個問題，現在它可以工作。在這個故事中可悲的是我花了幾個小時試圖解決這個問題，我認爲這是因爲動態元素還沒有出現在DOM中。而且一個同事幫助我，並沒有設法知道。非常感謝！ – Gawel91

將類添加到動態添加的元素

回答

相關問題