dynamic td blocking tr element

Question

I have a table that if I append the rows and table data the tr element content seems to be blocked I cannot even edit it from the console after it is created I think its blocked by the 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'));
});

if I don't append the tr and td I can replace the td click selector with tr and it works, but if I append it nothing I do to the row has any affect even if I add css I can see it if I inspect it but it does not show or work like the cursor:pointer, but if I put them on the td element dynamically it works. any suggestions greatly appreciated.

new working code

      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

The append is not properly formed when rendered. Please inspect the elements, you can find that the td is not inside the tr element.

  $("#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> 

Answer 2

Append doesnt not work in that way. When you append an element you only name it like ; append('div') and it opens and closes div automaticly. So you have to create element tr then add its attributes, after that you create td and set its innerHTML. Append td into tr and append tr into table. Dont use /tr in append. Append puts dynamicly created element into target element's end. Best way to create an element is document.createElement('tr');. Hope this helps

Answer 3

Your event's 'this' is 'td', but you are trying to reference 'tr' which is a sibling of 'td', not a child. I changed to $(this).siblings('tr').data('id') and it works. Please see the snippet.

 $(function() { $("#product_table tbody") .append("<tr style='cursor:pointer;' data-id='21'>") .append("<td>data21</td>") .append("</tr>"); $("#product_table tbody").on("click", "td", function() { console.log('wtf'); console.log($(this).siblings('tr').data('id')); }); }); 

 #product_table { border: 1px #ccc solid; width: 100%; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='product_table' name='product_table' align='center'> <tbody> </tbody> </table>