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

【问题标题】：Dynamically adding content to panel listview with jquery mobile使用 jquery mobile 将内容动态添加到面板列表视图
【发布时间】：2026-02-08 16:00:01
【问题描述】：

我正在开发一个由 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');

【问题讨论】：

标签： jquery ajax django jquery-mobile

【解决方案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 上接受的答案，对此进行了更详细的讨论。

【讨论】：