当我加载HTML模板时，JSON元素不会填充，但它们可以作为静态HTML工作。

Question

我不认为这是一个破解代码问题，因为这是一个关于理解JS的问题。

我有点击元素时加载的HTML模板。需要说明的是，document.ready上已经加载了一个HTML模板，其功能正常。加载的HTML是您在初始加载页面时所使用的确切HTML，除了一些小的差异（图像等等）。这一切都没有问题，但由于某种原因我的JSON元素不加载。这是因为我写的负责加载JSON的实际javascript是在document.ready wrap吗？

要明确的是，除了text和img src之外，HTML完全相同。我提供了JS，因为这可能是问题。

只是寻找一些关于为什么会出现这种情况的指导，因为我还有一些其他JS / jquery代码字符串也不能用于模板加载（比如隐藏使用.hide的元素，可以在document.ready上使用）问题，但一旦模板加载，元素不会隐藏）。

这一切都在$(document).ready

var trinketJSON;
  $.getJSON("js/trinket.json", function (data) {
    trinketJSON = data;

    // TRINKET SELECTION TABLE
    $.each(trinketJSON, function (i, item) {
      $("<div>")
        .html(
          '<div class="trinket-tile"><div class="trinket-img" style=\'background-image: url("' +
          trinketJSON[i].RarityBG +
          '");\'><img src="' +
          trinketJSON[i].TrinketIMG +
          '" class="trinket-tile-img"></div><div class="trinket-effects"><ul><li class="trinket-effect">' +
          trinketJSON[i].EffectOne +
          '</li><li class="trinket-effect">' +
          trinketJSON[i].EffectTwo +
          '</li><li class="trinket-effect">' +
          trinketJSON[i].EffectThree +
          '</li><li class="trinket-effect">' +
          trinketJSON[i].EffectFour +
          '</li><li class="trinket-effect">' +
          trinketJSON[i].EffectFive +
          '</li><li class="trinket-effect">' +
          trinketJSON[i].EffectSix +
          '</li></ul></div><div class="trinket-info"><ul><li class="trinket-name">' +
          trinketJSON[i].TrinketName +
          '</li><li class="trinket-rarity">' +
          trinketJSON[i].Rarity +
          '</li><li class="trinket-class">' +
          trinketJSON[i].Class +
          '</li><li class="trinket-set"></ul></div></div>'
        )
        .appendTo(".trinket-select");
    });