JQuery點擊表

我有一個應用程序（Spring 4 MVC + Hibernate 4 + MySQL + Maven集成示例使用註釋）和JQuery，我想調用一個函數，只要用戶點擊一行使用官方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>

來源

2016-04-22 En NuNYet de Can CalÇadA

給出把你的代碼中的document.ready處理程序，或者把'script'標籤在你的HTML結束，只是''標記之前。還要注意''delegate（）'被認爲是過時的，您應該使用'on（）'來代替。 –

您必須更改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); 
    }   
}); 
}

來源

2016-04-22 08:45:21 superui

你不需要'type =「text/javascript」'。 – gcampbell

確保功能showItem在範圍內使用。（你加載正確）。檢查警報（typeof showItem）;在你調用之前，它應該作爲'函數'提醒，如果它提示爲'未定義'，那麼函數在範圍中不可用。

來源

2016-04-22 08:53:57

首先重新排列您的HTML和JavaScript代碼塊順序。

將JavaScript放在html代碼下。檢查您使用的jQuery是否從瀏覽器控制檯正確加載。當您使用jQuery時，請將您的Js代碼放入$(document).ready(function(){})。

例子如下

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#productResultTable').delegate("tr", "click", function() { 
     alert ('productResultTable'); 
     var id = $(this).attr("id"); 

     if (id != undefined) { 
     document.getElementById('itemId').value=id;   
     showItem (id); 
     }   
    }); 
}); 
</script>

來源

2016-04-22 08:56:15

回答

相關問題