为每个结果实现CSS初始化选项卡

Question

I am doing a school project that is a Movie lookup app connected to guidebox API. I am using Materialize CSS and trying to organize the information into their tabs system. They are added dynamically so the documentation says to initialize in javascript. It says to use:

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

However that doesn't work for me I guess since the tabs are not present at Doc Ready thaey are not pushed into the DOM until a submit request. I put just the

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

into a few places in my code and the best result was it working on the first movie returned on each search but for each subsequent return item the tabs break.

I could use some guidance on whether I can plug that in somewhere to make my existing code work.

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

Answer 1

There are some missing ending tags in your dynamically created dom elements.

Apart this, in this file assets/js/logic.js the following there are the following two lines:

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

That menas, whenever you add new tabs element you initialize them. The mistake I see is: in this way you initialize every tabs not only the new one. And, because you have already initilized the old one I can suggest you to rewrite the previous two lines in this format:

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

Answer 2

You can bind on every event, when node inserted in dom and after that, do with it what you want.

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