添加元素，元素是动态插入

我试图创建一个单页应用中，默认情况下是内容，所有人都能看到，但是，如果用户的会话管理（通过由PHP加入论坛会议）添加一些内容，以便管理员可以在不刷新的情况下修改该页面，以便使用大量的Ajax。添加元素，元素是动态插入

我的想法，我怎么能做到这一点是加载两个脚本，app.js是默认行为，如果管理，负载在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()但我不知道如何后动态内容加载使用，而且我还没有完全添加任何事件（尚未），所以我不确定我的其他选项。

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

这里是the project我的工作。

来源

2017-05-20 kinx

尝试$（document）.find（'.btn-container'） – Kontsnor

$（document）.on（'click'，'.btn-container '，function（）{} {} {;}}; – Gerard

这可能是一个计时问题，因为直到ajax请求收到响应，才会调用“完成”回调。 admin.js逻辑可能在调用“完成”回调之前运行。 – pacifier21

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

$.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。以这种方式，管理员的部分只在回调后被初始化

来源

2017-05-20 17:36:11 quirimmo

添加元素，元素是动态插入

回答

相关问题