jQuery keyup function doesnt work?

Question

My HTML file:

<html>
<head>
  <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
  <script type="text/javascript" src="js/scripts.js"></script>
  <link rel="stylesheet" type="text/css" href="style.css" />
  <title>
    Login
  </title>
</head>
<body>
<div class=loginForm>
  <p>Worker-ID:<input type=text id=workerID name=workerID /></p>
  <p>Password:<input type=password  id=workerPassword name=workerPassword /></p>
  <input type=submit id=submitLogin name=submitLogin value="Log in"/>
</div>
</body>
</html>

My scripts.js:

$('#workerID').keyup(function() {
    alert('key up');
);

It doesn't work at all. I tried everything space,one letter, numbers. The alert doesn't show up. Where is the mistake?

Always look for error messages in your browser's developer console first — Phil, Oct 15 '13 at 04:54

score 27 · Accepted Answer · answered Oct 15 '13 at 04:49

27

Apart from a typo around your missing }, when your script.js file runs (in the <head> section), the rest of your document does not exist. The easiest way to work around this is to wrap your script in a document ready handler, eg

jQuery(function($) {
    $('#workerID').on('keyup', function() {
        alert('key up');
    });
});

Alternatively, you could move your script to the bottom of the document, eg

        <script src="js/scripts.js"></script>
    </body>
</html>

or use event delegation which allows you to bind events to a parent element (or the document), eg

$(document).on('keyup', '#workerID', function() {
    alert('key up');
});

answered Oct 15 '13 at 04:49

Phil

157,677
23
242
245

1

Thanks it works now :) I moved it to the end and it works!! Should I always put javascripts and jquery at the end or what do you suggest? – Adrian Oct 15 '13 at 04:58
1

THANK YOU! $(document).on('keyup', '#workerID', function() worked for me where everything else didn't. – Anna_MediaGirl Jul 09 '14 at 23:08

score 2 · Answer 2 · answered Oct 15 '13 at 04:48

2

You're missing the curly bracket to close the function:

$('#workerID').keyup(function() {
    alert('key up');
});

Errors like these are usually seen in the browser's JavaScript console.

answered Oct 15 '13 at 04:48

rink.attendant.6

44,500
61
101
156

score 1 · Answer 3 · edited Mar 28 '16 at 14:45

in HTML

inser id, name,vale in " "

<div class="loginForm">
  <p>Worker-ID:<input type="text" id="workerID" name="workerID" /></p>
  <p>Password:<input type="password"  id="workerPassword" name="workerPassword" /></p>
  <input type="submit" id="submitLogin" name="submitLogin" value="Log in"/>
</div>

in js

$('#workerID').keyup(function() {
       alert('key up');} // here you forget "}"
      );

demo

score 0 · Answer 4 · answered Oct 15 '13 at 04:48

0

Syntax is wrong see here

$( document ).ready(function() {
   $( "#workerID" ).keyup(function() {
    .....................
   });
});

change ); to });

answered Oct 15 '13 at 04:48

PSR

39,804
41
111
151

jQuery keyup function doesnt work?

4 Answers4

Linked