Question

我在JQuery Mobile listView上使用此代码动态添加一些HTML内容：

此代码正在我的index.html文件中加载#page容器

<meta charset="utf-8">
<link rel="stylesheet" href="css/pages/notifications-list-view.css">

<div id="notifications-wrapper">
    <div class="notifications-content">

        <div data-role="navbar" id="navbar" class="notifications-categories">
            <ul>
                <li>
                    <a href="#" id="unread-notifications">
                        <span class="title">Unread notifications</span>
                        <i class="fa fa-circle fa-fw"></i>
                        <span class="count">4</span>
                    </a>
                </li>
                <li>
                    <a href="#" id="all-notifications" style="height: 60px; line-height: 60px; ">All notifications</a>
                </li>
            </ul>
        </div>

        <ul data-role="listview" class="notifications-list" data-inset="true">

        </ul>
    </div>
</div>

<script src="js/pages/notifications-list-view.js"></script>

在我的notifications-list-view.js我有这段代码：

$("#unread-notifications").addClass ($.mobile.activeBtnClass);
fillList (4)

$("#unread-notifications").on ("click", function () {
    fillList (4);
});

$("#all-notifications").on ("click", function () {
    fillList (10);
});

function fillList (count) {
    var listItemClass = "listItem";
    var content = "";

    if (!$(this).hasClass ($.mobile.activeBtnClass)) {
        for (i = 0; i < count; i ++) {
            content += '<li id=' + listItemClass + '>';
            content += '<div class="delete-button"><a href="#" class="ui-btn delete-btn">Delete</a></div>';
            content += '<a href="#" class="notification-item-a">';
            content += '<div class="ui-li-thumb"></div>';
            content += '<div class="ui-li-text">';
            content += '<h3>Credit elligibility</h3>';
            content += '<p class="notification-core">';
            content += 'We have recievede  uhdccd uhc cdyucd cduhcd ucdhcd cduhcd ucdcd ucd cuhcd ucdcd ucdbcd ubc ahlan you how are you doing it\'s not good';
            content += 'We have recievede  uhdccd uhc cdyucd cduhcd ucdhcd cduhcd ucdcd ucd cuhcd ucdcd ucdbcd ubc ahlan you how are you doing it\'s not good';
            content += 'We have recievede  uhdccd uhc cdyucd cduhcd ucdhcd cduhcd ucdcd ucd cuhcd ucdcd ucdbcd ubc ahlan you how are you doing it\'s not good';
            content += 'We have recievede  uhdccd uhc cdyucd cduhcd ucdhcd cduhcd ucdcd ucd cuhcd ucdcd ucdbcd ubc ahlan you how are you doing it\'s not good';
            content += 'We have recievede  uhdccd uhc cdyucd cduhcd ucdhcd cduhcd ucdcd ucd cuhcd ucdcd ucdbcd ubc ahlan you how are you doing it\'s not good';
            content += '</p>';
            content += '</div>';
            content += '</a>';
            content += '</li>';

            listItemClass = "listItem" + i;
        }

        $(".notifications-list").html (content);
        $(".notifications-list").trigger ("chosen:updated");
    }
}

然而，先前加载的CSS / JS未应用。

如何将CSS样式和JS代码应用于此动态添加的HTML内容？

谢谢。

Answer 1

jQM没有应用样式（增强）动态添加的元素，应该根据使用的小部件调用增强方法。

问题是您在初始化页面之前正在调用fillList()，也许您正在使用.ready()。你应该听jQM pagecontainer events来运行函数。

此外，您必须了解jQM在pagebeforecreate事件期间开始增强小部件;完成增强后，会触发pagecreate事件。如果您在pagebeforecreate期间动态添加元素，则无需调用任何增强方法，但是，在pagecreate上，您需要手动增强动态元素，例如.listview("refresh")。

在fillList()中，$(".notifications-list").html(content);期间只需pagebeforecreate，您就需要$(document).on("pagebeforecreate", "#pageID", function () { fillList(20); });。
```
fillList()
```
在$(".notifications-list").html(content).listview("refresh")中，您需要添加增强 $(document).on("pagecreate", "#pageID", function () { fillList(20); });。
```
fillList()
```

如果您想在创建并显示页面后调用.listview()，则需要确定 listview 是否存在于DOM中并创建。

新鲜/新列表视图：动态追加后使用.listview("refresh")创建
已存在 listview ：使用{{1}}将样式应用于新元素

将加载的CSS应用于动态创建的HTML

1 个答案: