為每個結果實現CSS初始化選項卡

Question

我正在做一個學校項目，該項目是連接到guidebox API的電影查找應用程序。 我正在使用Materialize CSS，並嘗試將信息組織到其選項卡系統中。 它們是動態添加的，因此文檔說要使用javascript進行初始化。 它說使用：

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

但是，我認為這對我不起作用，因為Doc Ready文檔中不存在這些選項卡，直到提交請求之前，這些標簽才被推入DOM。 我把

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

放到我的代碼中的幾個位置，最好的結果是它可以處理每次搜索返回的第一部電影，但是對於每個后續返回項，制表符都會中斷。

對於是否可以將其插入某個地方以使現有代碼正常工作，我可以使用一些指導。

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

Answer 1

動態創建的dom元素中缺少一些結束標簽。

除此之外，在此文件assets / js / logic.js中，以下兩行內容：

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

該菜單，無論何時添加新的tab元素，都將對其進行初始化。 我看到的錯誤是：這樣，您不僅初始化了每個選項卡，還初始化了每個選項卡。 並且，由於您已經初始化了舊的代碼，因此我建議您以這種格式重寫前兩行：

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

Answer 2

您可以對每個事件進行綁定，將節點插入dom后，然后再按所需操作即可。

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