为每个结果实现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;
});