附加后链接将无法在 jquery mobile 上正确显示

Question

我正在尝试从 json 数据中输出列表“li”中的链接并将其传递给 jquery 移动元素。但是在我附加 jquery 之后，“li”上的链接似乎输出像常规链接（蓝色链接而不是正确的 listview jquery mobile），并且没有显示 jquery mobile 的属性 css。

不知道我解释的是否正确，但我在这里做错了什么？？

<?php include "_header.php" ?>
<div data-role="header" data-theme="c">
    <div align="center">
                //some code
    </div>
</div><!-- /header -->
<div data-role="content">   
    <div align="center"><img src="imgs/charmchasers-m.png" alt="Charmchasers logo" width="250px" ></div>    

    <div class="content-primary">
        <ul data-role="listview" data-inset="true" data-theme="e">
            <li>
                <h3>North America</h3>
                <p>H-D Dealer Charms - USA &amp; Canada.</p>
                <ul data-role="listview" data-filter="true" data-theme="c" data-inset="true" id="state-list">
                </ul>
            </li>
            <li>
                <a href="display.php?state=international" data-transition="slide">
                    <h3>International</h3>
                    <p>H-D Dealer Charms - Asia &amp; Europe.</p>
                </a>
            </li>
            <li>
                //some code
            </li>
            <li>
                //some code
            </li>
        </ul>
    </div>
</div><!-- /content -->
<div data-role="navbar" data-iconpos="bottom">
    <ul>
        <li><a href="display.php?state=new" data-role="button" data-icon="star" data-theme="a" data-transition="slide">New Charms</a></li>
        <li>//some code</li>
    </ul>
</div><!-- /navbar -->
<script>
(function() {
    var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';

    $.getJSON(json_url, function(data){
        $.each(data, function(i, item) {
            $('#state-list').append('<li><a href="display.php?state=' + item.d_state  + '" data-transition="slide">' + see_abbrv(item.d_state) + '</a></li>');
        });
    });
}) ();
</script>

有什么想法吗？？

Answer 1

每次添加新内容时jQuery Mobile都需要强制增强页面标记。它可以通过多种方式完成，如果您想了解更多信息，请查看此 ARTICLE，更透明的是我的个人博客。或者看看HERE。

应该使用这个函数：

$('#state-list').listview('refresh'); 

而且代码需要改成这样：

(function() {
    var json_url = 'http://localhost:8888/MOD/charmchasers/app/mysql-to-json.php';

    $.getJSON(json_url, function(data){
        $.each(data, function(i, item) {
            $('#state-list').append('<li><a href="display.php?state=' + item.d_state  + '" data-transition="slide">' + see_abbrv(item.d_state) + '</a></li>');
        });
       $('#state-list').listview('refresh'); 
    });
}) ();

还有一点要记住，这一行必须在 $.getJSON 内使用，但在 $.each 循环结束并附加内容之后。最后要记住的最后一件事是，如果可能，经典的 jQuery DOM 就绪函数不应与 jQuery Mobile 一起使用，应该改用page events，了解更多信息HERE。

Answer 2

“如果您生成新的标记客户端或通过 Ajax 加载内容并将其注入页面，您可以触发 create 事件来处理新标记中包含的所有插件的自动初始化。” - http://jquerymobile.com/demos/1.0/docs/pages/page-scripting.html

因此，在添加新列表项后，您必须触发创建事件来构建列表视图。试试：

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

或

$('ul').trigger('create');

编辑：

在 $.each() 循环中试试这个：

$('#state-list').append('<li><a href="display.php?state=' + item.d_state  + '" data-transition="slide">' + see_abbrv(item.d_state) + '</a></li>').listview('refresh');

我刚刚添加了 .listview('refresh');在每个附加的末尾。如果列表视图已经初始化，它应该可以工作。