Возвращение значения элемента списка, по которому щелкнули мышью, с помощью jQuery

0

Я создаю список элементов из некоторого JSON, и я пытаюсь получить "значение данных" этого элемента, когда он щелкнул. Пока у меня есть

 var target = $('#list');
 target.empty();
 for (var i = 0; i < myJson.length; i++) {
     $('<tr class = "selectedItem">')
         .append($('<td>', {
             'text': myJson[i].id,
             'data-value':myJson[i].id
         }))
         .append($('<td>', {
             'text': myJson[i].name
         }))
         .append($('<td>', {
             'text': myJson[i].Details
         }))
     .appendTo(target);
 };   

Что создает список и отображает его на экране. Однако, когда пользователь нажимает на один из этих элементов, я пытаюсь получить идентификатор. Я добавил, что класс "selectedItem" думает, что я смогу просто сделать событие щелчка, но такой удачи не будет. Вот что у меня есть:

  $('body').on('click', ".selectedItem", function () {
      var value = $(this).data('value');
      console.log(value);
  });

Но я просто продолжаю получать "неопределенные". Любые идеи о том, что я делаю неправильно? благодаря

Теги:

2 ответа

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

Ваше событие находится на tr, поэтому $(this) - tr.

попробуйте добавить класс selectedItem на td ;)

 var target = $('#list');
 target.empty();
 for (var i = 0; i < myJson.length; i++) {
     $('<tr>')
         .append($('<td class = "selectedItem">', {
             'text': myJson[i].id,
             'data-value':myJson[i].id
         }))
         .append($('<td>', {
             'text': myJson[i].name
         }))
         .append($('<td>', {
             'text': myJson[i].Details
         }))
     .appendTo(target);
 }; 

Вы также можете получить первый td, если вы сохраните класс в tr:

var value = $(this).children().first().data('value');
  • 1
    +1 или, возможно, OP мог бы использовать: var value = $(this).find('td[data-value]').data('value'); и держать класс на уровне TR
2

Значение data-value находится в первой ячейке таблицы, тогда как класс, на котором выполняется таргетинг, находится в строке. В этом случае вы можете получить <td> который имеет значение data-value в событии click:

$('body').on('click', ".selectedItem", function () {
    var value = $(this).children('[data-value]').data('value');
    console.log(value);
});

Ещё вопросы

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