jquery mobile嵌套列表视图无法正确呈现

时间:2015-02-16 00:14:33

标签: jquery listview mobile nested jquery-mobile-listview

我正在使用1.4.5版本的jquery移动应用程序 我想加载一个嵌套的listview,检索HTML代码到服务。 但是嵌套的<ul><li>无法正确呈现。他们似乎没有风格 但是如果我在html页面中使用相同的代码它可以工作

这是我的代码:

HTML

<div data-role="main" class="ui-content">
  <ul data-role="listview" data-inset="true" id="MainMenu">
   </ul></div>

的Javascript

<script type="text/javascript" charset="utf-8">
    $(document).ready(function () {
        $.ajax({
            type: "POST",
            async: true,
            url: "http://localhost/myproject/Category/Category.asmx/GetCategoryMenu",
            data: "{language:'en-En'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (mainMenu) {
                var list = $("#MainMenu");
                list.empty();
                list.append(mainMenu.d);
                list.trigger('create');                   
            },
            error: function () {
                window.ShowError("Error :(");
            },
            complete: function () {
                $("#MainMenu").listview("refresh");                    
            }
        });

    });

这是从Web服务返回的HTML代码

<ul data-role="listview" data-inset="true" id="MainMenu">
<li id="mainLi1">
Menu1
<ul id="mainUl1">
<li id="subLi1-6">option1  </li>
<li id="subLi1-7">Option2  </li>
</ul>
</li>
<li id="mainLi2">
Menu2
<ul id="mainUl2">
<li id="subLi2-3">Option1  </li>
<li id="subLi2-4">Option2  </li>
<li id="subLi2-5">Option3  </li>
</ul>
</li>
</ul>

我尝试了一切:

  • .trigger('create')
  • 每个ul / li上的不同ID
  • 更改jquery mobile和jquery框架版本

这是我的行动代码 http://jsfiddle.net/7c892qb1/9/

任何建议表示赞赏 感谢

0 个答案:

没有答案