Javascript 如何使用jQuery访问带有小胡子的页面中呈现的元素

我正在使用mustache模板和ajax将一些内容呈现到我的页面中。然后我想使用另一个函数（componentLoaded）与一些元素交互（根据页面位置隐藏它们）

显然，这个函数需要在页面上呈现项目之后运行，但是这是如何做到的呢？我试图在ajax调用中使用promise deferred对象，但这似乎不起作用：

var template = null;

//Get Template
function getTemplate() {
    return $.get('mustache/components/block.mustache', function(response) {
         template = response;
    }).then(renderComponent());
}

//Render Template
function renderComponent() {
    // Get Data
    return $.ajax('JSON/testData.json',{
        dataType: 'json',
        success: function(data) {
            if(template != null) {
                for(var i = 0; i < data.blocks.length; i++) {

                    renderTemplate(template, data.blocks[i], $('#container'));
                }
            }
            else {
                console.error('Error: Template failed to load');
            }
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.error('Ajax Error: ' + xhr.status + ' ' + thrownError);
        }
    }).then(componentLoaded());
}

/**
 * Render the template onto the page
 * @param template, The mustache template to render the data with
 * @param data, {{object}} The data to render into the template
 * @param target, {{object}} The jQuery object for the element to append the rendered data to
 */
function renderTemplate(template, data, target) {
    var rendered = Mustache.render(template, data);

    target.append(rendered);
}

/**
 * Render the component
 */
$(document).ready(function() {
    getTemplate();
});

var模板=null；
//获取模板
函数getTemplate（）{
返回$.get（'mustache/components/block.mustache'，函数（响应）{
模板=响应；
})。然后（renderComponent（））；
}
//渲染模板
函数renderComponent（）{
//获取数据
返回$.ajax（'JSON/testData.JSON'{
数据类型：“json”，
成功：功能（数据）{
如果（模板！=null）{
对于（变量i=0；i

---

请注意，componentLoaded（）是另一个文件中的函数。

为什么不在成功函数中调用componentLoaded（）

function renderComponent() {
    // Get Data
    return $.ajax('JSON/testData.json',{
        dataType: 'json',
        success: function(data) {
            if(template != null) {
                for(var i = 0; i < data.blocks.length; i++) {

                    renderTemplate(template, data.blocks[i], $('#container'));
                }
                componentLoaded();
            }
            else {
                console.error('Error: Template failed to load');
            }
            // or here
            // componentLoaded();
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.error('Ajax Error: ' + xhr.status + ' ' + thrownError);
        }
    });
}

函数renderComponent（）{
//获取数据
返回$.ajax（'JSON/testData.JSON'{
数据类型：“json”，
成功：功能（数据）{
如果（模板！=null）{
对于（变量i=0；i

顺便说一句，当你真的想使用承诺时，你的问题的答案是这样写的：

...
}).then(componentLoaded);
...

由于您在将函数传递给promise时正在执行函数

componentLoaded（）

，因此promise将无法执行