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

How to get ID of listview item Clicked. [javascript / jquery / jquery mobile]

本文关键字：jquery ID javascript 单击 mobile 何获取 获取 视图 列表      更新时间：2023-09-26

我需要关于如何检测用户点击/点击哪个<li>的建议，然后将点击/点击的<li>的"ID"写入Localstorage，然后使用保存的Localstorage为Detail Page检索数据。

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

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

我需要的是，如何使用JS使<li>可点击(链接到详细信息页面(，同时写入Localstorage。

我试过：

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

但是<li>是不可点击的，并且没有键/值写入Localstorage。更不用说检测哪个<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);
  });
});

您不需要使任何<li>元素可以自己点击，当您将点击事件添加到任何元素时，该事件将在项目被点击时触发。

你的问题基本上是，当事件绑定到元素时，它没有被加载。所以你必须像这样将代码添加到文档就绪事件中。

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

$('.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
});

工作Fiddle

您需要使用事件委托来分配点击事件，因为您是通过JSON请求动态构建HTML DOM的，因此在页面加载时无法定位"li"元素。所以，它看起来像：

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

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

jQuery事件委派

我已经用stackoverflow成员提供的示例代码解决了我的问题。我之前的问题是，我将listview的创建分开，并将click监听器绑定到两个不同的页面事件中。

在测试了页面事件序列之后，我现在将点击监听器放入同一个页面事件中，而不是将其一分为二。现在我的代码是这样的，希望这能帮助人们遇到和我一样的问题：

//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
        });
    }
              );
});
相关文章：