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/ 因为我动态地将项目添加到列表视图。我还为每个项目提供了一个 ID，以便轻松识别已单击的项目，以便我可以将该值传递到另一个页面。

Answer 1

您的 javascript 和 html 文件中有一些错误。

在 Jquery Mobile 中定义列表视图时，您必须将 data-role="listview" 包含到 ul 的定义中，这样 jquerymobile 就会明白您需要的是列表视图，而不是“普通”列表。

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

您遇到的第二个错误是在 html 上没有定义 data-name 属性，而您尝试使用 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

Answer 2

我知道我回答得太晚了，但可能对其他开发人员有帮助。即使我在寻找相同查询时找到了这个链接，最后我找到了一些简单易用的解决方案。

在这里，我使用了静态数组，但我也使用了动态数组，因此您可以轻松检查差异。

我使用自定义列表视图并从 HTML 5 数据库（电话间隙）中检索数据。所以移动开发者可以编写如下代码，

function DB_QuerySuccess(tx, results) {
    console.log("Returned rows = " + results.rows.length);
    var com_id_array = []; // init array     
    var com_name_array = []; // init array
    var com_img_array = []; // init array

    //this will return user_id if user exist else return "no user"
    if (!results.rowsAffected)
    {
        for (var index = 0; index < results.rows.length; index++) 
        {
            var item = results.rows.item(index);
            var com_id = item.com_id; // company id
            var com_name = item.com_name; // company name
            var com_photo = item.com_photo; // company name
            com_id_array.push(com_id);
            com_name_array.push(com_name);
            com_img_array.push(com_photo);

              $('#ls_com_list').append('<li><img id="com_img" src="'+ com_img_array[index] +'" width="100px" height="100px"/><h3>'+com_name_array[index]+'</h3><p>'+com_id_array[index]+'</p><div align="right"><img src="img/add_icon.png" width="20px" height="20px"/><img src="img/icon-action-close.png" width="20px" height="20px" onclick=\'alert("i am at "+"'+ [index]+'"+" position")\'/></div></li>').listview('refresh');
        }
    }

}

因此，当您单击右侧按钮时，会弹出警报并显示当前索引。

我认为 Web 开发人员也可以做同样的事情。

希望对大家有所帮助。

• Live Demo : Custom List View
• Get Code