Question

可能重复：
  jQuery Mobile styles for an asynchronously included div
  Jquery mobile listview - check initialization is complete

我有一个移动jquery列表视图，最后有一个LOAD MORE BUTTON。除了使用AJAX添加的新结果中缺少css之外，一切正常。

这是我的按键代码

<div data-role="fieldcontain">
            <a onclick="loadmore(this);" type="button" id="showmore" href="#more">Load more..</a>
        </div>

的Javascript

function loadmore(a) {
    jq("#show_more_btn").removeClass("show_more_btn");
    jq("#show_more_btn").addClass("loading_btn");
    jq("this").css("display", "none");
    if (null == jq.cookie("bp-activity-oldestpage")) jq.cookie("bp-activity-oldestpage", 1, {
        path: "/"
    });
    var b = jq.cookie("bp-activity-oldestpage") * 1 + 1;
    jq.post(ajaxurl, {
        action: "activity_get_older_updates",
        cookie: encodeURIComponent(document.cookie),
        page: b
    }, function (a) {
        jq("#show_more_btn").removeClass("loading_btn");
        jq("#show_more_btn").addClass("show_more_btn");
        jq.cookie("bp-activity-oldestpage", b, {
            path: "/"
        });
        jq("li[class='load-more']").hide();
        jq("#activity-stream").append(a.contents);
    }, "json");
    return false
}

正确列表视图的屏幕截图 http://s12.postimage.org/yd2hsk119/original.jpg

问题 http://s17.postimage.org/81ofaf1bz/got.jpg

修改列表视图代码

<div class="content-primary">   
            <ul data-role="listview"  id="activity-stream">
    <?php endif; ?>

    <?php while ( bp_activities() ) : bp_the_activity(); ?>

        <?php locate_template( array( 'activity/entry.php' ), true, false ); ?>

    <?php endwhile; ?>

    <?php  if ( empty( $_POST['page'] ) ) :  ?>

            </ul>
        </div>

Entry.php

<li id="activity-<?php bp_activity_id(); ?>">
<a href...>...</a>
<h3>...</h3>
<p>...</p>
</li>

有谁知道问题是什么？

Answer 1

您需要刷新listview this：

$("ul").listview('refresh');

您正在将这些元素添加到列表中，但它们没有被jQuery mobile设置样式，因为它们没有适当的类和属性。

AJAX加载时缺少CSS

1 个答案: