Nuñito de la Calzada Nuñito de la Calzada - 6 months ago 30
Javascript Question

JQuery Click on Table

I have an application (Spring 4 MVC+Hibernate 4+MySQL+Maven integration example using annotations) , and JQuery, I want to call a function whenever the user clicks on a row using Official jQuery user interface library , but it does not work

<script type="text/javascript">
$('#productResultTable').delegate("tr", "click", function() {
alert ('productResultTable');
var id = $(this).attr("id");
if (id != undefined) {
document.getElementById('itemId').value=id;
showItem (id);
}
} );
</script>


<table cellspacing="0" cellpadding="0" border="0" id="productResultTable" class="table table-striped">
<thead>
<tr>
<th width="10%">
Licence No.&nbsp;<span class="ui-icon-triangle-1-n"></span>
<input class="form-control" type="text" />
</th>
<th width="25%">
Product name&nbsp;<span class="ui-icon-triangle-1-n"></span>
<input class="form-control" type="text" />
</th>
<th class="notinmobile">
Category&nbsp;<span class="ui-icon-triangle-1-n"></span>
<input class="form-control" type="text" />
</th>
<th class="notinmobile">
Manufacturer&nbsp;<span class="ui-icon-triangle-1-n"></span>
<input class="form-control" type="text" />
</th>
<th class="notinmobile">
Country(ies)&nbsp;<span class="ui-icon-triangle-1-n"></span>
<input class="form-control" type="text" />
</th>
<th class="notinmobile">
Retailer(s)&nbsp;<span class="ui-icon-triangle-1-n"></span>
<input class="form-control" type="text" />
</th>
</tr>
</thead>
<tbody>

<tr id="915447" class="odd">
<td>ES-LR-017-001</td>
<td><img src="images/bedmattress1.jpg"/>3-delt Rejse Helsemadras 60*120, varenummer 691738</td>
<td class="notinmobile">bed mattresses</td>
<td class="notinmobile">Carpenter ApS</td>
<td class="notinmobile">Denmark </td>
<td class="notinmobile">Carpenter aps</td>
</tr>




</tbody>
<tfoot>
<tr style="border-top:1px solid #336699;">
<th>
License No.
</th>
<th>
Product name
</th>
<th class="notinmobile">
Category
</th>
<th class="notinmobile">
Manufacturer
</th>
<th class="notinmobile">
Country(ies)
</th>
<th class="notinmobile">
Retailer(s)
</th>
</tr>
</tfoot>
</table>

Answer

You have to change HTML and Script order.

Script code move to bottom of your code.

<table>
  <tr>
    <td>
    ....
    </td>
  </tr>
</table>


  <script type="text/javascript">
    $('#productResultTable').delegate("tr", "click", function() {
      alert ('productResultTable');
      var id = $(this).attr("id");
      if (id != undefined) {
        document.getElementById('itemId').value=id;         
        showItem (id);
      }           
    } );
  </script>

or you can use onload event.

window.onload = function() {
  $('#productResultTable').delegate("tr", "click", function() {
  alert ('productResultTable');
  var id = $(this).attr("id");
  if (id != undefined) {
    document.getElementById('itemId').value=id;         
    showItem (id);
  }           
});
}