javascript - 动态 td 阻塞 tr 元素

Question

我有一个表，如果我追加行和表数据，tr 元素内容似乎被阻止了，我什至无法在创建后从控制台编辑它，我认为它被 td 阻止了

<table id='product_table' name='product_table' align='center'>
  <tbody>

  </tbody>
</table>


$("#product_table tbody")
  .append("<tr style='cursor:pointer;' data-id='21'>")
  .append("<td>data21</td>")
  .append("</tr>");

$("table#product_table tbody").on("click", "td", function() {
  console.log('wtf');
  console.log($(this).data('id'));
});

如果我不附加 tr 和 td 我可以用 tr 替换 td 点击选择器并且它可以工作，但是如果我附加它，我对行做的任何事情都没有任何影响，即使我添加了 css 我也可以看到它如果我检查了它，但它不像光标:指针那样显示或工作，但如果我将它们动态地放在 td 元素上，它就会工作。非常感谢任何建议。

新的工作代码

      for (i=0;i<res.data.length;i++) {  

        $("#product_table tbody")
          .append("<tr style='cursor:pointer;' data-id='"+res.data[i].id+"'>" +  
              "<td>"+res.data[i].productNumber+"</td>" + 
              "<td>"+res.data[i].description+"</td>" + 
              "<td>"+res.data[i].productSize+"</td>" + 
              "<td>"+res.data[i].boxLength+"</td>" + 
              "<td>"+res.data[i].boxWidth+"</td>" + 
              "<td>"+res.data[i].boxHeight+"</td>" + 
              "<td>"+res.data[i].avgBilled+"</td>" + 
              "<td>"+res.data[i].productWeight+"</td>" + 
              "<td>"+res.data[i].boxQty+"</td>" + 
              "</tr>"
              );                       
      }


        $("table#product_table tbody").on("click", "tr", function(){
          console.log($(this).data());
        }); 

Answer 1

呈现时附加的格式不正确。请检查元素，您会发现 td 不在 tr 元素内。

 $("#product_table tbody")
            .append("<tr style='cursor:pointer;' data-id='21'><td>data21</td></tr>")

        $("table#product_table tbody").on("click", "td", function () {
            console.log('Working.');
            console.log($(this).parent().data('id'));
        });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<table id='product_table' name='product_table' align='center'>
        <tbody></tbody>
    </table>