Как получить идентификатор элемента списка. [javascript / jquery / jquery mobile]

0

Мне нужна консультация о том, как определить, какой <li> щелкнуть/щелкнуть пользователем, а затем записать "идентификатор" щелчка/щелкнув <li> в Localstorage, а затем использовать сохраненный Localstorage для извлечения данных для подробной страницы.

Я новичок в javascript/jquery, если вы можете предоставить некоторый простой пример кода, мы будем очень благодарны.

Я знаю, как писать Localstorage, читать Localstorage, получать данные JSON из API сервера, генерировать Loop для Listview с уникальным идентификатором для каждого <li>.

Мне нужно, как использовать JS для создания <li> clickable (ссылка на страницу подробностей) и одновременно писать в 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);
  });
});
  • 0
    обеспечить JSFIDDLE
  • 0
    Нужна дополнительная информация, появляется ли ошибка на консоли при настройке прослушивателя щелчков? Вы выполняете код, когда dom готов, то есть в подобии $(document).ready(function(){ }); ?
Показать ещё 5 комментариев
Теги:
local-storage
jquery-mobile

4 ответа

0
Лучший ответ

Я решил проблему с примером кода, представленным здесь элементом 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
        });
    }
              );
});
Поделиться
4

Вам не нужно, чтобы какой-либо элемент <li> был доступен для вас по клику, когда вы добавляете событие click к любому элементу, который будет срабатывать при щелчке элемента.

В основном проблема заключается в том, что элемент не загружается, когда событие привязывается к нему. Таким образом, вы должны добавить свой код в готовое к документу событие, как это.

$(document).ready(function(){
  $('.liClass').click(function() { 
     var id= $(this).attr("id"); // Get the ID
  };
});
Поделиться
  • 0
    Привет, я попробовал твой код совета, но он тоже не работает. Я обновил свой пост с моим примером кода. Пожалуйста, посмотрите на мой код. Благодарю.
  • 0
    Создайте скрипку js, тогда мы посмотрим, что мы можем сделать ...
1 
$('.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
});

Рабочий скрипт

Поделиться
  • 0
    Привет, спасибо за jsfiddle. Я попытался отредактировать мой код в качестве вашей рекомендации. Но элемент списка не может захватить клик тоже. Я поместил свой код в свой пост. Пожалуйста, посмотрите на мой код, что не так, пожалуйста, совет, спасибо.
0

Вам нужно будет использовать делегирование событий, чтобы назначить событие click, поскольку вы динамически создаете HTML DOM с помощью запроса JSON, таким образом не имея возможности найти элементы "li" во время загрузки страницы. Таким образом, это будет выглядеть так:

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

См. Эту ссылку для получения более подробной информации:

Передача события jQuery

Поделиться

Ещё вопросы

Сообщество Overcoder
Наверх
Меню