Jquery Mobile检测在列表视图中单击了哪一行

Jquery Mobile detect which row was clicked in a listview

本文关键字：一行 单击 检测 Mobile 列表 视图 Jquery      更新时间：2023-09-26

我到处找，似乎在任何地方都找不到。有人知道如何获得列表视图中点击的行的值吗？这可以是对象中从名称到索引的任何内容。现在我有一个处理水龙头的功能。我需要能够在新页面转换时将值传递给我正在加载的新页面。我想我可以在这里做：

$('#taskListTable').delegate('li', 'tap', function () {
    console.log('clicked');
    //Insert code here to pull a value from either an index or a name and save it
});

我想也许在杂碎中做这件事会很好？不过，我不确定网络上来自原生iOS开发的标准做法是什么。有人有什么线索吗？谢谢

这就是我填充列表视图的方式：

$.each(tasks, function(index, task) { 
        $taskList.append("<li><a href='taskDetails.html'>      <h3>"+task.name+"</h3><p>"+task.description+"</p></a></li>");
    });

taskDetails.html需要任务的索引，这样我就可以从服务器上获取详细信息。这样做的标准做法是什么？

要获得tap ed列表项的索引，可以执行以下操作：

$('#taskListTable').delegate('li', 'tap', function () {
    console.log('clicked');
    var index = $(this).index();
});

是的，就是这样。尽管这假设<li>元素都是兄弟元素。

.index()的文档：http://api.jquery.com/index

如果你想转换到新页面：

$('#taskListTable').delegate('li', 'tap', function () {
    console.log('clicked');
    $.mobile.changePage($(this).find('a').attr('href'), {
        data : { selectedIndex : $(this).index() }
    });
});

这将获得新页面，并将selectedIndex变量附加为查询字符串参数，该参数设置为tap ped列表项的索引。

此外，为了防止点击列表项中链接的默认行为，我将把这个事件处理程序附加到链接元素：

$('#taskListTable').delegate('a', 'tap', function (event) {
    event.preventDefault();
    console.log('link clicked');
    $.mobile.changePage($(this).attr('href'), {
        data : { selectedIndex : $(this).closest('li').index() }
    });
});

新版本的jQuery不赞成使用"delegate"方法。考虑使用这个替代：

$('#taskListTable').on('tap', 'a', function (event) {
}

这里有另一种获取id的方法，如果你有一个启用数据库的应用程序，并且你要搜索的id是数据库的id，而不是行索引，那么它特别有用：

填写表格时，请考虑以下内容：

<ul id="taskListTable">
  <li id="task400" class="tasks">Task with db id 400</li>
  <li id="task295" class="tasks">Task with db id 295</li>
</ul>
$('#taskListTable').on('tap', 'li', function (event) {
  variable = $(this).attr('id').substr(4);
}

这将获得数据库id，您可以将其传递到其他页面。

要获得名称，可以执行以下操作：

$(this).find('h3').html()

或者，您可以在标记中使用一些东西，如id或数据属性，以提供比名称更好的句柄。

这种方法怎么样？

$taskList.append("<li><a href='taskDetails.html?id=" + task.id + "'></a><h3>" + task.name + "</h3>...</li>");

然后反演CCD_ 6参数。

Jasper的解决方案很好，但如果您的事件处理程序中有任何其他编辑DOM的代码，那么在代码中使用"this"关键字时，它可能会指向完全不同的地方。

我曾多次在键盘上摇头，因为我的用户说"我点击了第一项，但这总是会打开列表中最后一项的编辑屏幕。"所以不知何故，使用"这个"不是正确的做法。

此外，当我尝试event.target、event.currentTarget或event.originalTarget时，这些都不起作用。他们都指向jQueryMobile"页面"，当代码运行时，该页面是可见的（甚至与表所在的页面不同）。

安全和/或预期的方法是：

  • 使用event.originalEvent.srcElement而不是"this"
  • 不使用.delete（），而是使用.on（）
  • 使用$（document）.on（）绑定事件，而不是使用$（'#table'）.on

因此，这将导致：

$(document).on('tap','#taskListTable li',function(event){
    //The properties of 'event' relate to $(document), not to '#taskListTable li',
    //so avoid .currentTarget, .target etc.
    //But fortunately 'event' does have one property that refers to the original 
    //user event.    
    var theOriginalTapEvent = event.originalEvent;
    var theRealClickedElement = theOriginalTapEvent.srcElement;
    //Note that the clicked element could be a sub-element of the li
    //whose index you want. So just referencing theRealClickedItem could
    //could still be getting you bad results.
    var theRelevantListItem = $(theRealClickedElement).parents('li');
    //Now you're ready to get the item's index or whatever.
})
相关文章：