views:

72

answers:

3

I thought I understood JQuery, evidently not. Why, in this example, does the first textbox register clicks but not the second?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4

/strict.dtd">
<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min"/>
<script type="text/javascript">

    captureKeys = function(event)
    {
    alert("foo");
    }
    $(document).ready(function()
            {
        $('#UsingJQuery').bind('keyup', function(){alert('bar');});
            });

</script>
</head>
<body id="contentText" >
    <input type="text" id="UsingPlainJavaScript" onkeyup="captureKeys()"/>
  <input type="text" id="UsingJQuery"/>

</body>
</html>

EDIT: OK, I've fixed the typo but it's still not working..

+3  A: 

Because the ID of the second input element is UsingJQuery (capital U), not usingJQuery.

$('#UsingJQuery').bind('keyup', function(){alert('bar');});

should do it.

Update:

The error must be somewhere else, your code is correct. See: http://jsfiddle.net/H2xye/

Maybe you did not include jQuery correctly:

src="jquery-1.4.2.min.js"

you are missing .js at the end of the path. At least this is the standard naming, maybe you renamed it.
The error console should tell you more.

Update2: See jAndy's answer regarding the </script> tag. This is probably the other problem!

Felix Kling
+4  A: 

This is asking for trouble:

<script type="text/javascript" src="jquery-1.4.2.min"/>

You need a </script> to have a valid markup

<script type="text/javascript" src="jquery-1.4.2.min"></script>

That is a big NoNo and might be the reason for your problem. Another thing is, there is no .js in your filename? Make sure that your jQuery lib has the correct name aswell.

Reference: http://www.w3.org/TR/xhtml1/#C_3

jAndy
+1 for a great spot!
lnrbob
+1  A: 

Please change from

<script type="text/javascript" src="jquery-1.4.2.min"/>

to

<script type="text/javascript" src="jquery-1.4.2.min.js"/>

Nagarajan