Simple jQuery blur function not working
Question
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.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'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.
5 answers
solution1
3 ACCPTED 2015-06-14 16:53:02
$(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
solution2
2 2015-06-14 16:55:08
Add it in a ready 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>
solution3
1 2015-06-14 16:53:23
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
solution4
1 2015-06-14 16:54:03
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.com/ready/
solution5
1 2015-06-14 17:00:57
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.