Jquery onLoad() - 加载页面中的输入字段显示不正确

Posted 2023-05-08

【中文标题】Jquery onLoad() - 加载页面中的输入字段显示不正确

【英文标题】：Jquery onLoad() - Input fields in the page loaded are not displayed correctly

【发布时间】：2017-11-12 23:42:05

【问题描述】：

我将一个页面动态加载到另一个页面中。 当我加载页面时，除了输入字段之外，所有项目都采用了正确的 CSS 自定义。我使用 MDL，但我也尝试过使用 Bootstrap，但问题仍然存在。

在第 1 页显示：

在第 2 页显示：

mainLayout.load(url, function(responseTxt, statusTxt, xhr)         
    // Load the javascript associated to this html page
    if(script_path !== undefined) 
        $.getScript(script_path);
    
);

我在第一页和加载页面中的输入字段使用相同的代码。

<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
    <input class="mdl-textfield__input" type="text" id="input_new_tr_value" />
    <label class="mdl-textfield__label" for="input_new_tr_value"> _('value') </label>
    <span class="mdl-textfield__error"> _('error') </span>
  </div>

有什么建议吗？ 所有其他元素都以正确的方式显示。 我还尝试在加载第 2 页后使用 getScript() 和 CSS 文件重新加载 MDL js 文件。

【参考方案1】：

我找到了解决办法：

只需调用“componentHandler.upgradeDom();”来自 javascript 文件。