La function simple de jQuery blur no funciona

Estoy teniendo uno de esos momentos en los que no puedo conseguir que funcione un código simple. A pesar de gastar algo más de una hora en esto, no puedo hacer que este pedazo de código funcione;

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

He ejecutado mi código a través de un validador de HTML 5 para asegurarme de que no era algo estúpido y me he asegurado de estar usando la última versión de jQuery. Lo extraño es que puedo hacer que el código funcione en jsFiddle.

 $(function(){ $("#target").blur(function () { alert("Handler for .blur() called."); }); }); 

Debe actualizar su script al estilo escrito anteriormente. Eso es agregar una envoltura.

Estás vinculando un evento usando jquery. Sin embargo, no es necesario que cuando la secuencia de commands se ejecuta, jquery se haya cargado para entonces, por lo tanto, la vinculación no ocurre, por lo tanto, la function no se desencadena.

Necesita agregar un contenedor de ready of jquery, que asegure que todo el enlace de events y la ejecución del script se realice una vez que dom esté listo.

Aquí, he creado un plunker para ti con la versión de trabajo – http://plnkr.co/edit/Xhur8f1ur194ii6XlRby?p=preview

Agregarlo en una function list

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

poner la function en document.ready

 <script> $(document).ready(function(){ $("#target").blur(function () { alert("Handler for .blur() called."); }); }); </script> 

o poner la label del script del final del cuerpo

Por favor, envuelva su código js en

 $(function(){ // your code }); 

será

  <script> $(function(){ $("#target").blur(function () { alert("Handler for .blur() called."); }); }); </script> 

Aquí está la reference https://api.jquery.com/ready/

Su JavaScript se está ejecutando antes de que se input elementos de input , por lo que no hay nada para adjuntar el evento. Mueva su script al final de la página o envuélvalo en $(function(){...}) . Hacer esto último hace que la secuencia de commands espere al evento DOMReady disparado por el browser antes de ejecutarse.

Opción 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> 

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