JQuery Klicken Sie auf Tabelle

Question

Ich habe eine Anwendung (Spring 4 MVC + Hibernate 4 + MySQL + Maven Integration Beispiel mit Anmerkungen), und JQuery, ich möchte eine Funktion aufrufen, wenn der Benutzer auf eine Reihe mit Official jQuery Benutzeroberfläche Bibliothek klickt , aber es funktioniert nicht

<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

Sie müssen HTML und Skript Reihenfolge ändern.

Skriptcode an den unteren Rand des Codes verschieben.

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

oder Sie können Onload-Ereignis verwenden.

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

Answer 2

Sicherstellen, dass die Funktion showItem in Umfang zur Verfügung. (Sie es richtig laden). Überprüfen Sie die Warnung (typeof showItem); bevor Sie anrufen, sollte es als 'Funktion' alarmieren, wenn es als 'undefiniert' warnt, dann ist die Funktion nicht im Umfang verfügbar.

Answer 3

Ordnen Sie zuerst Ihren HTML- und JavaScript-Codeblock Auftrag neu an.

Platzieren Sie das JavaScript unter dem HTML-Code. Überprüfen Sie, ob die von Ihnen verwendete jQuery-Datei ordnungsgemäß von der Browserkonsole geladen wurde. Wenn Sie jQuery verwenden, fügen Sie Ihren Js-Code in die $(document).ready(function(){}) ein. Setzen Sie Ihren Code in einem document.ready Handler

Beispiel wird unter

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