動的に挿入された要素に要素を追加

Question

私は、デフォルトでは誰の目にも見えるコンテンツである単一ページアプリケーションを作成しようとしていますが、管理者がリフレッシュせずにページを変更できるようにいくつかのコンテンツを追加してください。

私がこれを達成する方法は、2つのスクリプトを読み込むことです.App.jsはデフォルトの動作用で、adminの場合はadmin.jsファイルに読み込みます。 admin.jsでは、動的にロードされたコンテンツを、管理者のためのボタン、フォームなどの特定のコントロールに読み込むように変更したいと考えています。

このSPAでは、jQueryとhandlebars.jsを使用して、コンテンツがAPIからのデフォルトビューで読み込みます。

app.js：admin.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); 
     } 
    }); 
}); 

、これまでのところ、私はすでに動的なコンテンツが何であるかに追加しようとしています：

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

は働いていません。動的なコンテンツがロードされた後、私はそれを使用するかどうかはわかりませんが、私は.on()があることを知っている機能は、（console.logでテスト）を実行したがために、動的要素で、リンクが.btn-container

に追加しません私は他のオプションが何であるか分かりません。 .btn-containerがすでに動的に追加されているときに

は、だから私の質問は、どのように私は.btn-containerに私の新しい<a>要素を追加することができますか？

ここにはthe project私が取り組んでいるのは：。

Answer 1

これは、コンテンツがdoneコールバックでレンダリングされる前に関数が呼び出されることに関連している必要があります。 できることは、doneコールバックの中の関数を呼び出して、関数が正しく定義されているかどうかをチェックすることです（adminスクリプトも含まれている場合のみ）。

$.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を削除してください。 このようにして、管理者のセクションはコールバック後にのみ初期化されます