2013-10-15 8 views
4

Мой HTML-файл:Функция jQuery keyup не работает?

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

Мои scripts.js:

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

Это не работает. Я пробовал все пространство, одну букву, цифры. Предупреждение не отображается. Где ошибка?

+2

Всегда обращайте внимание на сообщения об ошибках в консоли разработчика вашего браузера первые – Phil

ответ

23

Помимо опечатки вокруг вашего отсутствующего }, когда выполняется ваш файл script.js (в разделе <head>), остальная часть вашего документа не существует. Самый простой способ обойти это, чтобы обернуть ваш скрипт в документ, готовый обработчик, например

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

В качестве альтернативы, вы можете переместить свой сценарий в нижней части документа, например

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

или использования событие делегация, которая позволяет связать события с родительским элементом (или документа), например

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

Спасибо работает сейчас :) Я переместил его до конца, и он работает! Должен ли я всегда ставить javascripts и jquery в конце или что вы предлагаете? – adiii4

+1

СПАСИБО! $ (document) .on ('keyup', '#workerID', function() работал для меня, где все остальное не было. –

+0

Это правильный ответ. Спасибо @Phil –

0

Синтаксис неправильно see here

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

изменение ); в });

2

Вы упускаете фигурные скобки, чтобы закрыть функцию:

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

Ошибки, подобные этим, как правило, у консоль JavaScript браузера.

0

в HTML

INSER идентификатор, имя, юдоль в " "

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

в Js

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

demo

Смежные вопросы