Я создаю список элементов из некоторого 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);
});
Но я просто продолжаю получать "неопределенные". Любые идеи о том, что я делаю неправильно? благодаря
Ваше событие находится на 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');
Значение data-value
находится в первой ячейке таблицы, тогда как класс, на котором выполняется таргетинг, находится в строке. В этом случае вы можете получить <td>
который имеет значение data-value
в событии click:
$('body').on('click', ".selectedItem", function () {
var value = $(this).children('[data-value]').data('value');
console.log(value);
});
var value = $(this).find('td[data-value]').data('value');
и держать класс на уровне TR