I'm having one of those moments were I can't get a simple piece of code to work. Despite spending just over an hour on this, I can't get this piece of code to work;
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo 'Test'; ?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=".11.4/themes/smoothness/jquery-ui.css"><!-- jQuery stylesheet -->
<script src=".1.4.min.js"></script><!-- jQuery libary -->
<script src=".11.4/jquery-ui.min.js"></script><!-- jQuery UI -->
</head>
<body>
<script>
$("#target").blur(function () {
alert("Handler for .blur() called.");
});
</script>
<form>
<input id="target" type="text" value="Field 1">
<input type="text" value="Field 2">
</form>
</body>
</html>
I've run my code through a HTML 5 validator to ensure it wasn't something stupid and I've ensured I'm using the latest version of jQuery. The strange thing is, I can make the code work on jsFiddle.
I'm having one of those moments were I can't get a simple piece of code to work. Despite spending just over an hour on this, I can't get this piece of code to work;
<!DOCTYPE html>
<html lang="en">
<head>
<title><?php echo 'Test'; ?></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery./ui/1.11.4/themes/smoothness/jquery-ui.css"><!-- jQuery stylesheet -->
<script src="https://code.jquery./jquery-2.1.4.min.js"></script><!-- jQuery libary -->
<script src="https://code.jquery./ui/1.11.4/jquery-ui.min.js"></script><!-- jQuery UI -->
</head>
<body>
<script>
$("#target").blur(function () {
alert("Handler for .blur() called.");
});
</script>
<form>
<input id="target" type="text" value="Field 1">
<input type="text" value="Field 2">
</form>
</body>
</html>
I've run my code through a HTML 5 validator to ensure it wasn't something stupid and I've ensured I'm using the latest version of jQuery. The strange thing is, I can make the code work on jsFiddle.
Share Improve this question edited Jun 14, 2015 at 17:15 Michael LB asked Jun 14, 2015 at 16:51 Michael LBMichael LB 2,7224 gold badges25 silver badges40 bronze badges 2-
because your script is running before the input element is made, either put the script at the bottom or use
$(document).ready. And it would work in jsFiddle because by default the code you put in the js box is run onload – Patrick Evans Commented Jun 14, 2015 at 16:53 - script is not getting the target id, put the script at the bottom of the body – Newinjava Commented Jun 14, 2015 at 16:55
5 Answers
Reset to default 3$(function(){
$("#target").blur(function () {
alert("Handler for .blur() called.");
});
});
You need to update your script to the like written above. That is add a wrapper.
You are binding an event using jquery. However, it is not necessary that when your script executes, jquery has been loaded by then, hence, the binding does not happen, hence, the function does not get triggered.
You need to add a wrapper of on ready of jquery, which make sures that all the binding of events and script execution is done once the dom is ready.
Here, I have created a plunker for you with working version - http://plnkr.co/edit/Xhur8f1ur194ii6XlRby?p=preview
Add it in a ready function
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("input").blur(function(){
alert("This input field has lost its focus.");
});
});
</script>
</head>
<body>
Enter your name: <input type="text">
<p>Write something in the input field, and then click outside the field to lose focus (blur).</p>
</body>
</html>put the function in document.ready
<script>
$(document).ready(function(){
$("#target").blur(function () {
alert("Handler for .blur() called.");
});
});
</script>
or put script tag of end of the body
Please wrap your js code into
$(function(){
// your code
});
it will be
<script>
$(function(){
$("#target").blur(function () {
alert("Handler for .blur() called.");
});
});
</script>
Here is the reference https://api.jquery./ready/
Your JavaScript is running before the input elements are rendered, so there's nothing to attach the event to. Either move your script to the end of the page or wrap it in $(function(){...}). Doing the latter makes the script wait for the DOMReady event fired by the browser before executing.
Option 1:
<body>
<form>
<input id="target" type="text" value="Field 1">
<input type="text" value="Field 2">
</form>
<script>
$("#target").blur(function () {
alert("Handler for .blur() called.");
});
</script>
</body>
Option 2:
<body>
<script>
$(function(){
$("#target").blur(function () {
alert("Handler for .blur() called.");
});
});
</script>
<form>
<input id="target" type="text" value="Field 1">
<input type="text" value="Field 2">
</form>
</body>