Jquery not finding element within a table

Question

Hi there,

Jquery is unable to find any element within my table - here is the htmlcode. if I don't specify and element name #btnLogin it attaches the click event to all the elements. When i try to find a specific element it just doesn't pickup.

<script>
    $("#btnLogin").click
    (   function()
        {
            alert('Hi');
        }
    );
</script>
<table width="290px" border="1" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF" style="border-style:solid; border: 1px solid; ">
  <tr>    
    <td width="100%" align="left" valign="top" bgcolor="#FFFFFF" style="padding:5px"><table width="100%" border="0" cellpadding="0" cellspacing="1" bgcolor="#FFFFFF">
      <tr>
        <td width="100%" bgcolor="#9B2301"  style="padding:5px"><span class="text2" style="padding:5px">Login...</span></td>
      </tr>
      <tr>
        <td style="padding-top: 8px; padding-left:10px;">
                <input name=txtUserName id="txtUserName" style="border:1px solid #CCCCCC;" type="text"  value="Username">
                <input name=txtPassword id="txtPassword" style="border:1px solid #CCCCCC;" type="text" value="Password">
        </td>
      </tr>
      <tr>
         <td valign="middle" style="padding-top: 5px; padding-left:10px;">
                <input id="Check" Type=Checkbox style=" font-size:8px;" name="Remember">&nbsp<font style="color: #9B2301; font-weight:bold">Remember Me.</font> | <font style="color: #9B2301; font-weight:bold"><a id="btnLogin" style="color: #666666; font-weight: normal;" href="#">Login</a></font> 
        </td>
      </tr>
       <tr>
         <td valign="middle" align=right style="padding-top: 5px; padding-right:15px;">
                <input id="Login" Type="Button" style="font-size:11px; border:1px solid #CCCCCC" name="Login" Value="Login">
        </td>
      </tr>
    </tr>
</table>

Any Assistance will be highly appreciated.

Thanks

Answer 1

<script>
$(function() {
    $("#btnLogin").click
    (   function()
        {
            alert('Hi');
        }
    );
});
</script>

Try doing it on DOM ready instead of before the element is even generated/processed/rendered.

Answer 2

If you are looking for #btnLogin, jquery won't be able to find it because your input button's login id is "Login".

So it should be:

$("#Login").click(function() {
   alert("Hi");
});

Answer 3

When your function tries to attach the click handler, the element might not exist. Try

<script>
 $(function () {
  $("#btnLogin").click(function () {
             alert('Hi');
      });
 });
</script>

The $(function () {...}); part makes jQuery wait until the page is ready and all the elements exist before finding the element with ID btnLogin and attaching the click handler.

Answer 4

You are running the script before the page has loaded, therefore the element you are searching for doesn't yet exist.

Try running the script when the document is ready.

$(document).ready(function() {
    $("#btnLogin").click
    (   function()
        {
            alert('Hi');
        }
    );
});