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 就绪函数不应与 {{1}一起使用应该使用， jQuery Mobile ，详细了解 HERE 。

Answer 2

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

因此，在附加新列表项后，您必须触发create事件以构建列表视图。尝试：

$('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'）;在每个追加的末尾。如果列表视图已经初始化，它应该可以工作。

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

2 个答案: