1

我正在尝试从 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>

任何的想法？？

4

2 回答 2

1

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

应使用此功能：

$('#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'); 
    });
}) ();

还有一件事要记住，这一行必须在 a 内部使用，$.getJSON但在$.each循环结束并附加内容之后。最后要记住的最后一件事是，如果可能的话，经典的就绪函数不应该与一起使用，而是应该使用，在这里找到更多信息。jQuery DOMjQuery Mobilepage events

于 2013-02-01T16:15:07.210 回答
0

“如果您生成新的标记客户端或通过 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'); 在每个附加的末尾。如果列表视图已经初始化，它应该可以工作。

于 2013-02-01T16:07:52.907 回答