如何获取列表视图项的ID单击。 [javascript / jquery / jquery mobile]

Question

我需要有关如何检测用户点击/单击哪个<li>建议，然后将点击/单击的<li>的'ID'写入Localstorage，然后使用保存的Localstorage检索详细信息页面的数据。

我是javascript / jquery的新手，如果您可以提供一些简单的示例代码，将不胜感激。

我知道如何编写Localstorage，读取Localstorage，从服务器API获取JSON数据，为Listview生成具有每个<li>唯一ID的Loop。

我需要的是如何使用JS使<li>可单击（链接到“详细信息页面”）并同时写入Localstorage。

我努力了：

$('.liClass').click(function() { //block of code to write Localstorage };

但是<li>不可单击，并且没有键/值写入本地存储。 更不用说检测哪个<li>被单击了（我不知道）。

请指教，谢谢。

代码更新：

//Show restaurant listing - NOTE: This is not first page. Link from other Page.

$('#restaurantList').on("pagebeforecreate", function() {
    $.getJSON("http://mydomain.com/api/restaurant", function( data ) {
        function rstListing(data) {
            if ($.isEmptyObject(data) === true) {
                alert ('JSON return empty');
        } else {
            for (i=0; i<data.length; i++){
                $('#restaurantListing').append('<li id="' + data[i].restaurant_id + '" class="rstList"><img src="http://mydomain.com/file/img/' + data[i].restaurant_logo + '"><h2>' + data[i].name + '</h2><p>' + data[i].city + '</p></li>');
                $('#restaurantListing').listview('refresh');
            }
        }
        }
        rstListing(data);
    }
              );
});

//Listview link to Detail Page

$(document).ready(function(){
  $('.rstList').click(function() { 
     var id = $(this).attr("id"); // Get the ID
      alert(id);
      console.log(id);
  });
});

还尝试了：

//Listview link to Detail Page

$('#restaurantList').on("pageload", function() {
  $('.rstList').click(function() { 
     var id = $(this).attr("id"); // Get the ID
      alert(id);
      console.log(id);
  });
});

Answer 1

您无需将任何<li>元素设置为可自行单击，将click事件添加到任何元素时，该事件将在单击该项目时触发。

您的问题基本上是，将事件绑定到该元素后，该元素不会被加载。 因此，您必须在这样的文档就绪事件中添加代码。

$(document).ready(function(){
  $('.liClass').click(function() { 
     var id= $(this).attr("id"); // Get the ID
  };
});

Answer 2

$('.liclick').click(function() {
   alert($(this).attr("id"));//Get id of clicked li
   localStorage.setItem($(this).attr("id"),$(this).attr("id")); //stored into localStorage
   alert("Data from localStorage "+localStorage.getItem($(this).attr("id"))); // get stored id
});

工作小提琴

Answer 3

您将需要使用事件委托来分配click事件，因为您是通过JSON请求动态构建HTML DOM，因此在页面加载时无法找到'li'元素。 因此，它看起来像：

$(document).on("click", ".rstList", function (event) {
    // click event
}

有关更多详细信息，请参见此链接：

jQuery事件委托

Answer 4

我已经通过这里的stackoverflow成员提供的示例代码解决了我的问题。 我以前的问题是因为我分开了创建列表视图，并将单击侦听器绑定到两个不同的页面事件中。

在测试页面事件序列之后，我现在将点击侦听器放入同一页面事件中，而不是分成两个事件。 现在我的代码如下所示，希望这可以帮助某人遇到与我相同的问题：

//Show restaurant listing
$('#restaurantList').on("pagebeforecreate", function() {
    alert('pagebeforecreate event triggered');
    $.getJSON("http://mydomain.com/api/restaurant", function( data ) {
        function rstListing(data) {
            if ($.isEmptyObject(data) === true) {
                alert ('JSON return empty');
        } else {
            for (i=0; i<data.length; i++){
                $('#restaurantListing').append('<li id="' + data[i].restaurant_id + '" class="rstList"><img src="http://mydomain.com/file/img/' + data[i].restaurant_logo + '"><h2>' + data[i].name + '</h2><p>' + data[i].city + '</p></li>');
                $('#restaurantListing').listview('refresh');
            }
        }
        }
        rstListing(data);
        alert('rstListing() executed');
        $('.rstList').click(function() {
            alert($(this).attr("id"));//Get id of clicked li
            localStorage.setItem($(this).attr("id"),$(this).attr("id")); //stored into localStorage
            alert("Data from localStorage "+localStorage.getItem($(this).attr("id"))); // get stored id
        });
    }
              );
});