jQuery Mobile檢測列表視圖中單擊了哪一行

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列表項的索引，您可以執行以下操作：

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

是的，就是這樣。 盡管這假定<li>元素都是同級的。

.index()文檔： http : .index()

如果要然后過渡到新頁面：

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

這將獲得新頁面，並將selectedIndex變量作為查詢字符串參數附加到設置為tap列表項索引的位置。

另外，為了防止單擊列表項中的鏈接的默認行為，我會將此事件處理程序附加到鏈接元素：

$('#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

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.
})

Answer 4

要說出名字，您可以這樣做：

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

另外，您可以在標記中使用諸如id或data屬性之類的東西來提供比名稱更好的句柄。

Answer 5

那這種方法呢？

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

然后獲取id參數。