使用jQuery返回单击列表项的值

Question

我正在从一些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);
 };   

生成一个列表并将其显示在屏幕上。 但是，当用户单击这些项目之一时，我正在尝试获取ID。 我添加了“ selectedItem”类，以为我可以执行一次单击事件，但没有这种运气。 这是我所拥有的：

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

但我只是不断变得“不确定”。 我在做什么错的任何想法？ 谢谢

Answer 1

您的事件在tr ，因此$(this)是tr 。

尝试在td上添加class selectedItem ;）

 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);
 }; 

如果将类保留在tr上，则还可以检索第一个td：

var value = $(this).children().first().data('value');

Answer 2

data-value位于第一个表格单元格上，而您定位的类位于行上。 在这种情况下，您可以在click事件中获得具有data-value的<td> ：

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