JQuery simple blur function not working
I have one of those moments where I cannot get a simple piece of code to work. Even though I spent a little over an hour on this, I cannot 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.com/ui/1.11.4/themes/smoothness/jquery-ui.css"><!-- jQuery stylesheet -->
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script><!-- jQuery libary -->
<script src="https://code.jquery.com/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 ran my code through the HTML 5 validator to make sure it wasn't something stupid, and I ensured I was using the latest jQuery. Strange thing, I can get the code to work on jsFiddle.
source to share
$(function(){
$("#target").blur(function () {
alert("Handler for .blur() called.");
});
});
You need to update your script to the above. This adds a wrapper.
You are binding the event using jquery. However, it is not necessary that when the script is executed, the jquery has been loaded by then, so the binding is not executed, so the function does not run.
You need to add a wrapper to the finished jQuery, which ensures that all event binding and script execution is executed after the dom is ready.
Here I created a plunker for you with a working version - http://plnkr.co/edit/Xhur8f1ur194ii6XlRby?p=preview
source to share
Add it to the finished function
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/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>
source to share
Place your js code in
$(function(){
// your code
});
will be
<script>
$(function(){
$("#target").blur(function () {
alert("Handler for .blur() called.");
});
});
</script>
Here is the link https://api.jquery.com/ready/
source to share
Your JavaScript runs before the elements are rendered input
, so there is nothing to add there. Move your script to the bottom of the page, or wrap it in $(function(){...})
. Executing the latter makes the script wait for an event DOMReady
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>
source to share