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

Question

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

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

<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 事件期间开始增强 widgets；增强完成后，将触发 pagecreate 事件。如果你在pagebeforecreate期间动态添加元素，你不需要调用任何增强方法，但是，在pagecreate你需要手动增强动态元素，例如.listview("refresh").

1. 在 fillList() 中你只需要 $(".notifications-list").html(content); 在 pagebeforecreate 期间被调用。

   $(document).on("pagebeforecreate", "#pageID", function () {
     fillList(20);
   });
   

2. 在 fillList() 中，您需要添加增强 $(".notifications-list").html(content).listview("刷新")。

   $(document).on("pagecreate", "#pageID", function () {
     fillList(20);
   });
   

当您想在页面创建和显示后调用 fillList() 时，您需要确定 listview 是否存在于 DOM 中并已创建。

• Fresh/New listview:动态添加后使用.listview()创建
• 现有listview:使用.listview("refresh")将样式应用到新元素