javascript - 如何获取单击的 ListView 项的 ID。 [javascript/jquery/jquery 移动]

Question

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

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

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

我需要的是，如何用JS来制作<li>可点击(链接到详细信息页面)并同时写入本地存储。

我已经尝试过:

$('.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>元素可以由您自己点击，当您向任何元素添加点击事件时，该事件将在点击该项目时触发。

您的问题基本上是当事件绑定(bind)到该元素时，该元素未加载。因此，您必须像这样在文档就绪事件中添加代码。

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