Javascript 为什么我不能在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>');
            });
        });
    }
    ;
...

尽管它应该将按钮附加到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>');
                });
            });
        });
    }
    ;

---

您使用了错误的选择器imgButtons按钮应为imgButtons span以选择imgButtons中的span

此外，您的模板是异步加载的，因此您必须等到通过回调函数加载后才能对其进行操作。差不多

 $(document).on('click', "#subcategoryButtons button", function () {
        getTemplate('imgMenu.html', callback);
        function callback(){
            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>');
            });
        }
    });
    ...
function getTemplate(templateUrl, callback)
{
    $.get('templates/' + templateUrl, function (content)
    {
        if (templateUrl === 'leftMenu.html')
        {
            $('#leftMenu').html(content);
        }
        else
        {
            $('#main').html(content);
        }
        callback();
    });
}

---

让我们对代码进行一些修改，使用-ajax方法返回的jqxhr对象实现该接口，因此您可以使用它

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

这样使用它

$(document).on('click', "#subcategoryButtons button", function (e) {
    getTemplate('imgMenu.html').then(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;
        $.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>');
        });
    });
});

---

您应该向我们显示要检查的getTemplate代码。追加操作的选择器错误。。IMG按钮。没有按钮。已添加getTemplate。选择器指向正确的位置，但无法选择新模板中的任何元素。@AsinUserx请检查我的答案！它一定是在尝试时滑倒了，我会在问题中纠正它。问题是，无论我使用什么选择器，如果它在新加载的模板中，我都无法访问它。@AsinuRex我怀疑这可能不是实际问题，加载模板可能是异步操作，因为您已经告诉我您使用了$.get，因此，在您选择时元素可能不存在。我已尝试将附加部分放入另一个函数中，如何使它等到加载模板后再尝试附加？我尝试了您的代码，但目前为止运气不佳。感谢promise资源，这似乎正是我在这里需要的，但我认为我用错了：

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

$(document).on('click', "#subcategoryButtons button", function (e) {
    getTemplate('imgMenu.html').then(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;
        $.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>');
        });
    });
});