Question

我有一系列从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，而是使用deferred.done：

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

Answer 1

您使用错误的选择器#imgButtons button应#imgButtons span选择#imgButtons

中的范围

此外，您的模板是异步加载的，因此您必须等到它被加载（通过回调函数）才能操作它。

之类的东西

 $(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();
    });
}

Answer 2

让我们对您的代码进行一些修改，使用promises - ajax方法返回的jqxhr对象实现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>');
        });
    });
});

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

2 个答案: