JQuery Mobile - ListView - 获取选中项

Posted 2023-05-09

【中文标题】JQuery Mobile - ListView - 获取选中项

【英文标题】：JQuery Mobile - ListView - Get the selected item

【发布时间】：2012-12-05 04:36:39

【问题描述】：

我已经查看了有关此问题的其他问题，但到目前为止我还无法解决我遇到的问题：

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，以便轻松识别已单击的项目，以便我可以将该值传递到另一个页面。

【参考方案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

【讨论】：

我不确定将回调绑定到 #restWhere 元素的目的是什么，但对我来说，绑定到 document 元素 pageshow 并没有太多意义每次单击 #restWhere 元素时都会发生事件。如果你这样做，你最终会得到几个pageshows 事件绑定到document 元素，每次用户点击#restWhere 元素时都会添加一个回调。请检查此解决方案jsfiddle.net/fhbjJ/1，并注意其末尾的$("#mylist").refresh("listview");。并确保您查看这本基础书籍：jqfundamentals.com

pageshow, 方法是我可以通过 ajax 调用显示所有项目的方式，因为我不知道触发了什么事件但发现了这个：***.com/a/10542821/1238887。我会看看那个。非常感谢。

【参考方案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] +'"  /><h3>'+com_name_array[index]+'</h3><p>'+com_id_array[index]+'</p><div align="right"><img src="img/add_icon.png"  /><img src="img/icon-action-close.png"   onclick=\'alert("i am at "+"'+ [index]+'"+" position")\'/></div></li>').listview('refresh');
        
    

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

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

希望对大家有所帮助。

Live Demo : Custom List View Get Code