将元素附加到动态列表，但浏览器不会刷新 UI

Append element to list dynamically, but browser doesn't refresh UI

本文关键字：浏览器 UI 刷新 列表 元素 动态      更新时间：2023-09-26

>我有一个用于加载服务器数据项的 JavaScript 代码段，并将它们插入具有生成的 LI 元素的 UL 元素中，如下所示：

函数加载新文件模板（） {    var list = _fileTemplateContainer.find（"ul"）;    $.submitToServer（"[server URL]"， null， function （data） {        list.empty（）;        如果（数据 == "） {            list.append（"模板不可用"）;在示例代码中，删除了 HTML 标记        }        否则 {            $.each（data， function （index， item） {                var itemElement = $（"[HTML template string]"）;                itemElement.find（"div[data-field='image']"）.css（"background-image"， "url（" + item.icon + "）"）;                itemElement.find（"div[data-field='caption']"）.text（item.caption）;                itemElement.find（"div[data-field='description']"）.text（item.description）;                itemElement.find（"div[data-field='type']"）.text（item.type）;                itemElement.bind（"click"， function （e） {                    $（e.target）.parents（"ul"）.find（"li"）.removeClass（"projectSelected"）;                    $（e.target）.parents（"li"）.addClass（"projectSelected"）;                });                itemElement.appendTo（list）;            });        }        控制台.log（列表）;    });}

此代码在第一次加载时有效，但在第二次加载时，将元素插入 UL 元素后 UI 无法刷新。

我确认数据已成功插入（使用 console.log（） 输出结果），所以我找不到这个问题的原因。

请查看此问题的屏幕截图。

如何解决这个问题？谢谢。

我的浏览器： 铬 19.0.1084.56， IE 9.0.8112.16421j查询版本 1.5.1

我自己解决了这个问题。

我使用我的jQuery插件使用以下代码初始化此表单：

   designFrameManager.updateFrameBody（data）;数据是一个 HTML 字符串。    projectDesigner = $（data）.projectDesigner（{        height： designFrameManager.getBodyHeight（），        width： designFrameManager.getBodyWidth（），        项目名称：名称    });

updateFrameBody（） 方法的代码：

   this.updateFrameBody = function （ui， initFunction） {        _designFrameBody.html（用户界面）;        if （initFunction ！= null && $.isFunction（initFunction））            initFunction（）;    };

我认为插件的初始化无法绑定到 DOM，因为 init 操作是在 UI 绑定到 DOM 之后，因此 DOM 无法在我的脚本调用后自动刷新更改。

因此，我将代码更新为：

   projectDesigner = $（data）.projectDesigner（{        height： designFrameManager.getBodyHeight（），        width： designFrameManager.getBodyWidth（），        项目名称：名称    });    designFrameManager.updateFrameBodyByObject（       项目设计器//初始化的对象    );

updateFrameBodyByObject（） 方法的代码：

  this.updateFrameBodyByObject = function （ui， initFunction） {        _designFrameBody.html（"）;        _designFrameBody.append（ui）;        if （initFunction ！= null && $.isFunction（initFunction））            initFunction（）;    };

此问题已成功修复。

感谢所有回复。

尝试运行以下命令： $('ul').listview('refresh');

相关文章：