JQuery Mobile - ListView - 获取所选项目

Question

我已经查看了其他问题,到目前为止我还没能解决我所遇到的问题:

HTML:

        <script type="text/html" id="searchPickPlaceTemplate">
                 <div class="searchpickwhere_box">
                     <ul data-role="listview" data-inset="true"></ul>
                 </div>
         </script>
         <div id="searchPickPlace"></div>

我在这里创建了一个jsfiddle:http://jsfiddle.net/antaeusa/TLGY7/2/ 因为我动态地将项目添加到listview.我还给每个项目一个id,以便轻松识别哪个项目被点击,这样我就可以将该值传递给另一个页面.

Answer 1

你的javascript和html文件中有一些错误.

在Jquery Mobile定义列表视图时,您必须包含data-role="listview"a的定义ul,这样jquerymobile将理解您需要listview而不是"普通"列表.

<ul data-role="listview">
  <!-- List Elements -->
</ul>

你遇到的第二个错误是data-namehtml上没有定义任何属性,你试图用javascript来获取它.

$('#searchPickPlace ul').children('li').bind('touchstart mousedown', function(e) {
    alert('Selected Name=' + $(this).attr('data-name'));
});

如果所选元素没有定义该属性,这显然不起作用.所以你必须在html上定义它,如下所示:

<div id="searchPickPlace">
    <ul data-role="listview">
        <li data-name="Remuera"><!-- List element content --></li>
        <li data-name="Posonby"><!-- List element content --></li>
    </ul>
</div>?

我修改了你的代码,这里是你问题的完整解决方案,希望它有所帮助:

http://jsfiddle.net/TLGY7/12/

注意:如果要在列表视图中动态添加更多元素,则必须$('.selector').listview('refresh');在添加的每个元素上调用该方法.这是文档的链接:

http://jquerymobile.com/demos/1.2.0/docs/lists/lists-methods.html