Question

我看起来高低，似乎无法在任何地方找到它。有谁知道如何在列表视图中获取行的值？这可以是从对象中的名称到索引的任何内容。现在我有一个处理水龙头的功能。我需要能够将值传递给我在转换时加载的新页面。我以为我可以在这里做到：

$('#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需要任务的索引，以便我可以从服务器中提取详细信息。这样做的标准做法是什么？

Answer 1

要获取tap ed list-item的索引，您可以执行此操作：

$('#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 list-item的索引。

另外，为了能够阻止点击列表项中链接的默认行为，我会将此事件处理程序附加到链接元素：

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

Answer 2

在新版本的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。

Answer 3

要取出名称，你可以这样做：

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

或者，您可以在标记中使用某些内容，例如id或data属性，以提供比名称更好的句柄。

Answer 4

这种做法怎么样？

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

然后检索id参数。

Answer 5

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

我多次在键盘上弄曲了头，因为我的用户说“我点击第一项，但总是打开列表中最后一项的编辑屏幕。”因此，某种方式使用“这个”并不是正确的方法。

此外，当我尝试event.target，event.currentTarget或event.originalTarget时，那些也无法正常工作。他们都指向了jQueryMobile“页面”，它在代码运行时可见（这甚至不是表所在的页面）。

安全和/或有意的方法是：

使用event.originalEvent.srcElement而不是'this'
不要使用.delegate（），而是使用.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.
})

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

5 个答案: