Materialize各結果のタブを初期化する

Question

私はGuidebox APIに接続されたムービールックアップアプリである学校プロジェクトを行っています。私は、マテリアライズCSSを使用して、タブシステムに情報を整理しようとしています。それらは動的に追加されるので、ドキュメンテーションはjavascriptで初期化するように指示します。これは、使用することを言う：

 $(document).ready(function(){ 
     $('ul.tabs').tabs(); 
     }); 

しかしタブが提出要求までDOMの中に押し込まれていないドキュメントレディthaeyに存在していないので、私は推測する私のために動作しないこと。私は私のコードでは、単にいくつかの場所に

 $('ul.tabs').tabs(); 

を入れて、最良の結果は、それが最初の映画に取り組んでいたタブ区切り、各検索ではなく、後続の各戻り項目に戻されます。

既存のコードを動作させるためにどこかにプラグインできるかどうかに関するガイダンスを使用できます。

https://github.com/jasonboru/group_project1_guidebox.git

Answer 1

あなたはノードがDOMに挿入され、すべてのイベント、に結合し、その後、あなたが望むそれを行うことができます。

$(document).bind('DOMNodeInserted', function(e) { 
    var element = e.target; 
}); 

Answer 2

ダイナミックに作成されたDOM要素には、終了タグがありません。

別に

この、このファイルの資産/のJS/logic.js、次の次の2行があります。

$('.guidebox-search-results').append(movieResult); 
$('ul.tabs').tabs(); 

あなたがそれらを初期化し、新たなタブの要素を追加するたびにメナス、それは。 私が見ている間違いは、このようにして新しいタブだけでなくすべてのタブを初期化することです。そして、すでに古いものを初期化したので、前の2行をこの形式で書き直すことをお勧めします：

$('.guidebox-search-results').append(movieResult); 
$('.guidebox-search-results').find('ul.tabs').tabs();