jquery - Materialise css - 动态加载选项卡元素

Question

我正在动态创建一组 tabs在页面加载时，但当我运行 on 函数时，它没有被拾取。我怎样才能让它工作？这是我到目前为止的代码:

HTML

<div class="row">
    <div class="col s12">
      <ul class="tabs">
        <li class="tab col s3"><a href="#test1">Test 1</a></li>
        <li class="tab col s3"><a class="active" href="#test2">Test 2</a></li>
        <li class="tab col s3"><a href="#test3">Test 3</a></li>
        <li class="tab col s3"><a href="#test4">Test 4</a></li>
      </ul>
    </div>
    <div id="test1" class="col s12">Test 1</div>
    <div id="test2" class="col s12">Test 2</div>
    <div id="test3" class="col s12">Test 3</div>
    <div id="test4" class="col s12">Test 4</div>    
</div>

JS

$('body').on('load', 'ul.tabs', function() {
    $('ul.tabs').tabs()
});

谢谢

Answer 1

试试这个 jQuery 代码，它使用 AJAX 加载 XML 数据:

function tabInit() {
    $('ul.tabs').tabs();
}

$.ajax({
    type: "GET",
    //Url to the XML-file
    url: "url/to/xml-file.xml",
    dataType: "xml",
    success: tabInit
});