Question

我正在尝试创建单个页面应用程序，默认情况下，任何人都可以看到内容，但是，如果用户的会话是admin（通过PHP添加的论坛会话）添加一些内容，以便管理员可以修改没有刷新的页面，所以很多ajax。

我的想法是如何实现这一点是加载两个脚本，app.js用于默认行为，如果是admin，则加载admin.js文件。在admin.js中，我想修改已动态加载的内容以加载特定控件，例如管理员的按钮，表单等。

所以，对于这个SPA，我使用jQuery和handlebars.js加载到默认视图中，其中内容来自api。

app.js：

$.ajax({
    url: "api.php?type=packages"
}).done(function(res) {
    const obj = $.parseJSON(res);
    const category = 766773;
    $.each(JSON.parse(obj)['payload'], function(k, v) {
        if (v.category == category) {
            const context = {
                packageName: v.name,
                packageId: v.id
            };
            const source = $('#item-template').html();
            const template = Handlebars.compile(source);
            const html = template(context);

            $('#items').append(html);
        }
    });
});

现在在admin.js中，到目前为止，我只是想添加已经是动态内容的内容：

function initAdminControls () {
  var editBtn = $('<a class="waves-effect waves-light btn red darken-2"><i class="material-icons">grade</i>Edit</a>');
  $('.btn-container').append(editBtn);
}

initAdminControls();

不工作。该函数运行（使用console.log测试），但由于动态元素，该链接不会附加到.btn-container

我知道有.on()但是我不确定如何在加载动态内容后使用它，而且我并没有完全添加任何事件（但是）所以我不确定我的其他什么选项。

所以我的问题是，当<a>已经动态添加时，如何将新的.btn-container元素附加到.btn-container？

这是the project我正在研究：。

Answer 1

这应该与在完成回调中呈现内容之前调用函数有关。你可以做的是在你完成的回调中调用函数，检查函数是否被正确定义（所以只有在包含管理脚本时才这样）。你可以这样做：

$.ajax({
    url: "api.php?type=packages"
}).done(function(res) {
    const obj = $.parseJSON(res);
    const category = 766773;
    $.each(JSON.parse(obj)['payload'], function(k, v) {
        if (v.category == category) {
            const context = {
                packageName: v.name,
                packageId: v.id
            };
            const source = $('#item-template').html();
            const template = Handlebars.compile(source);
            const html = template(context);

            $('#items').append(html);
            if (typeof(initAdminControls) === 'function') {
                initAdminControls();
            }
        }
    });
});

从admin的主脚本中删除init。通过这种方式，管理员的该部分仅在回调

之后才被初始化

将元素添加到动态插入的元素

1 个答案: