为什么我不能在JQuery中选择一个加载了$.get的元素

我有一系列从JSON加载的按钮，这些按钮在单击时会消失并附加其他按钮。

像这样（第一级按钮已经在页面上，并对悬停等其他事件做出正确反应）：

    ...
     $(document).on('click', "#subcategoryButtons button", function () {
            getTemplate('imgMenu.html');
            var entryIndex = this.id[0];
            var subentryIndex;
            if (this.id[1] === '0')
            {
                subentryIndex = this.id.slice(-1);
            }
            else
            {
                subentryIndex = this.id.slice(-2);
            }
            var imgs = data.category[entryIndex].subcategory[subentryIndex].imgs;
            $.each(imgs, function (imgIndex)
            {
                var imgName = data.category[entryIndex].subcategory[subentryIndex].imgs[imgIndex].imgName;
                var imgId = data.category[entryIndex].subcategory[subentryIndex].imgs[imgIndex].imgId;
                $('#imgButtons span').append('<button id="' + imgId + '">' + imgName + '</button>');
            });
        });
    }
    ;
...

这是正在加载的模板的内容：

<div id="imgSpace">
    <aside id="overlayRight">
        Right Overlay space
    </aside>
    <div id="overlayBottom">
        Bottom Overlay
    </div>
</div>
<nav id="imgButtons" class="resizable">
    <span></span>
</nav>

这是getTemplate代码：

function getTemplate(templateUrl)
    {
        $.get('templates/' + templateUrl, function (content)
        {
            if (templateUrl === 'leftMenu.html')
            {
                $('#leftMenu').html(content);
            }
            else
            {
                $('#main').html(content);
            }
        });
    }

尽管它应该将按钮附加到#imgButtons跨度，但它似乎无法选择刚刚加载的模板中的任何元素。如果我试图将按钮附加到页面的另一部分（比如最近没有加载的左菜单），或者我只是在主菜单中清除HTML，而不是获得模板，那么附件就可以工作了。因此，问题似乎在于如何选择已加载的元素。如有任何帮助，我们将不胜感激。

感谢所有为我指明正确方向的人。最后我没有使用Ajax，而是推迟了

 $(document).on('click', "#subcategoryButtons button", function () {
            var entryIndex = this.id[0];
            var subentryIndex;
            if (this.id[1] === '0') {
                subentryIndex = this.id.slice(-1);
            } else {
                subentryIndex = this.id.slice(-2);
            }
            var imgs = data.category[entryIndex].subcategory[subentryIndex].imgs;
            $('main').html('');
            $.get("templates/imgMenu.html", function (content)
            {
                $('#main').html(content);
            }).done(function () {
                $.each(imgs, function (imgIndex) {
                    var imgName = data.category[entryIndex].subcategory[subentryIndex].imgs[imgIndex].imgName;
                    var imgId = data.category[entryIndex].subcategory[subentryIndex].imgs[imgIndex].imgId;
                console.log(entryIndex);
                $('#imgButtons span').append('<button id="' + imgId + '">' + imgName + '</button>');
                });
            });
        });
    }
    ;