javascript - JQuery 单击表

Question

我有一个应用程序(使用注释的 Spring 4 MVC+Hibernate 4+MySQL+Maven 集成示例)和 JQuery，我想在用户使用官方 jQuery 用户界面库单击一行时调用一个函数，但它确实如此不工作

<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 1

您必须更改 HTML 和脚本顺序。

脚本代码移至代码底部。

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


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

或者你可以使用onload事件。

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