实现css初始化每个结果的选项卡

Question

我正在做一个学校项目，这是一个连接到指南针API的电影查找应用程序。我正在使用Materialise CSS并尝试将信息组织到他们的标签系统中。它们是动态添加的，因此文档说在javascript中初始化。它说要使用：

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

然而，这对我来说不起作用我想因为Doc Ready thaey中没有选项卡，所以在提交请求之前不会将其推送到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();  

那个me​​nas，每当你添加新的标签元素时，你都会初始化它们。 我看到的错误是：通过这种方式，您可以初始化每个选项卡，而不仅仅是新选项卡。并且，因为您已经启动了旧版本，我建议您以这种格式重写前两行：

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

Answer 2

您可以绑定每个事件，当节点插入dom中之后，然后按照您的需要进行操作。

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