将加载的CSS应用于动态创建的HTML [英] apply loaded CSS to dynamically created HTML

问题描述

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

I'm adding some HTML content dynamically using this code on a JQuery Mobile listView :

此代码正在我的索引中加载。 html 包含 #page 容器的文件

This code is being loaded in my index.html file withing the #page container

<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未应用。

however the CSS / JS loaded previously is not applied.

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

How can I make the CSS style and JS code applied to this dynamically added HTML content ?

谢谢。

推荐答案

jQM不应用样式（增强）动态添加元素，增强方法应该基于小部件被调用。

jQM doesn't apply styles (enhance) dynamically added elements, an enhancement method should be called based on widget used.

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

The problem is that you're calling fillList() before the page is initialized, maybe you're using .ready(). You should listen to jQM pagecontainer events to run functions.

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

Also, you have to understand that jQM starts enhancing widgets during pagebeforecreate event; when enhancement is done, a pagecreate event is fired. If you add elements dynamically during pagebeforecreate you don't need to call any enhancement method, however, on pagecreate you need to manually enhance dynamic elements, e.g. .listview("refresh").




1. fillList（）你只需要 $（。notifications-list）。html（content）; 在<$期间调用它c $ c> pagebeforecreate 。

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

在 fillList（）你需要添加增强 <$ em $ c> $（。notifications-list）。html（content）.listview（refresh）。

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

如果你想打电话给 fillList（）创建并显示页面后，您需要确定 listview 是否存在于DOM中并创建。

When you want to call fillList() after page is created and shown, you will need to determine whether the listview is present in DOM and created.

• Fresh / New listview ：使用 .listview（）在动态追加它后创建它


• 已存在 listview ：使用 .listview（刷新）将样式应用于新元素

• Fresh/New listview: Use .listview() to create it after appending it dynamically
• Existed listview: Use .listview("refresh") to apply styles to new elements

这篇关于将加载的CSS应用于动态创建的HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！