Question

我目前的javascript代码存在问题。我想使用这个模块创建一个树视图：

==问题==

当我在index.html中执行演示代码时：

<script> 
 $("#tree").jqmtree({
    title : 'Items',
    collapsed: true,
    data: [
        { "id": 1, "title": "Menu 1" },
        { "id": 2, "title": "Sub 1 1", "pid":1 },
        { "id": 3, "title": "Sub 1 2", "pid": 1 },
        { "id": 4, "title": "Sub 1 3", "pid": 1 },
        { "id": 5, "title": "Menu 2" },
        { "id": 6, "title": "Sub 2 1", "pid": 5 }
    ]
});
</script>

结果是正确的。

但是当我在这样的ajax请求之后执行相同的演示代码时：

$(document).ready(function() {

  $.ajax({
      type: "GET",
      url: "data/data.csv",
      dataType: "text",
      success: function(data) 
      {
         $("#tree").jqmtree({
         title : 'Items',
         collapsed: true,
         data: [
             { "id": 1, "title": "Menu 1" },
             { "id": 2, "title": "Sub 1 1", "pid":1 },
             { "id": 3, "title": "Sub 1 2", "pid": 1 },
             { "id": 4, "title": "Sub 1 3", "pid": 1 },
             { "id": 5, "title": "Menu 2" },
             { "id": 6, "title": "Sub 2 1", "pid": 5 }
            ]
        });
      }
 });

});

我没有正确的结果，菜单1和菜单2上的折叠不再有效。nok screenshot

你能指出我这种差异的原因吗？

感谢您的帮助。

== EDIT1 =

我尝试将演示代码放在没有ajax：

的情况下

$(document).on('pagecreate', '#page1' ,function(){
$("#tree").jqmtree({
        title : 'Items',
        collapsed: true,
        data: [
            { "id": 1, "title": "Menu 1" },
            { "id": 2, "title": "Sub 1 1", "pid":1 },
            { "id": 3, "title": "Sub 1 2", "pid": 1 },
            { "id": 4, "title": "Sub 1 3", "pid": 1 },
            { "id": 5, "title": "Menu 2" },
            { "id": 6, "title": "Sub 2 1", "pid": 5 }
        ]
    });



});

结果不好，我不明白为什么;（

通过Ajax实现JavaScript和JavaScript之间的JavaScript执行差异

0 个答案: