Question

我正在开发一款django供电的SPA应用程序，主要界面由jquery mobile提供支持。

我有一个小组。我的最终目标是根据用户点击打开它的链接动态更新此面板。

面板开始空白：

<div data-role="panel" id="properties_panel" data-display="overlay" data-position="right" data-position-fixed=true>
</div>

但是，当点击某些链接时，我想使用AJAX加载外部html文件来更新面板的内容：

var panel_text;
var menu_item_selector = $.get( "{% static 'elements/menu_preferences_elements.html' %}", function() {
        panel_text = menu_item_selector['responseText'];
    })
    .done(function() {

    })
    .fail(function() {

    })
    .always(function() {

});

现在，成功获取并加载了ajax文件，但是，我的目标是将内容显示为jquery移动元素（在本例中为列表视图）。但是，内容显示为普通列表，而不是列表视图。

menu_preferences_elements.html的内容：

<div class="editing_tools_section shadow">
    <div class="editing_tools_heading ui-btn ui-icon-minus ui-btn-icon-right ui-nodisc-icon">Search for menu item</div>
    <div class="editing_tools_item">Use the search box below to search for a menu item.</div>
    <div class="editing_tools_item grey_bg">
        <ul id="menu_item_list" data-role="listview" data-filter="true" data-icon="false" data-filter-reveal="true" data-filter-placeholder="Search for menu item..." data-inset="true">

             <script>
                menu_database().each(function(record){
                    document.write("<li><a href='#'  data-elementid='"+record.Item_Id+"'>"+record.Name+"</a></li>");
                });
            </script>
        </ul>
    </div>
</div>

如果我将该外部html文件的内容直接放入面板中，它将按预期运行100％。但是，当我动态添加它时，它不会将其视为jquery移动内容，而是将其呈现为普通列表。

这是jquery onclick监听器：

$(".editing_tools_section").on('click','.editing_tools_item', function(){

    $("#properties_panel").html(panel_text);

    $("#properties_panel").trigger('updatelayout');
    $("#properties_panel").panel("open");

 });

有没有办法让内容正确显示为可过滤的jquery移动列表视图？

编辑：

使用create方法修复：

 $("#properties_panel").trigger('create');

Answer 1

您可以尝试在div上触发create方法吗？

$(".editing_tools_section").on('click','.editing_tools_item', function(){

    $("#properties_panel").html(panel_text);

    $("#properties_panel").trigger('updatelayout');
    $("#properties_panel").trigger('create');
    $("#properties_panel").panel("open");

 });

来自this question的SO的接受答案，更详细地讨论了这个问题。

使用jquery mobile动态添加内容到面板列表视图

1 个答案: