Javascript 简单jQuery模糊函数不起作用

Javascript 简单jQuery模糊函数不起作用,javascript,jquery,html,Javascript,Jquery,Html,我有这样一个时刻,我无法得到一个简单的代码来工作。尽管花了一个多小时在这上面,我还是无法让这段代码正常工作 <!DOCTYPE html> <html lang="en"> <head> <title><?php echo 'Test'; ?></title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,

我有这样一个时刻,我无法得到一个简单的代码来工作。尽管花了一个多小时在这上面,我还是无法让这段代码正常工作

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

$(“#目标”).blur(函数(){
警报(“调用了.blur()的处理程序”);
});
我已经通过HTML5验证程序运行了我的代码,以确保它不是愚蠢的东西,并且我已经确保我使用的是最新版本的jQuery。奇怪的是,我可以让代码在JSFIDLE上工作

$(function(){

    $("#target").blur(function () {

        alert("Handler for .blur() called.");

    });
});
您需要将脚本更新为上面所述的格式。那就是添加一个包装器

您正在使用jquery绑定事件。但是,当脚本执行时,jquery没有必要在那时加载,因此绑定不会发生,因此函数不会被触发

您需要添加一个包装器on ready of jquery,以确保在dom就绪后完成所有事件绑定和脚本执行


在这里,我为您创建了一个具有工作版本的plunker-

将函数放入document.ready

<script>
$(document).ready(function(){
  $("#target").blur(function () {

    alert("Handler for .blur() called.");
  });
});
</script>

$(文档).ready(函数(){
$(“#目标”).blur(函数(){
警报(“调用了.blur()的处理程序”);
});
});

或者将脚本标记放在正文的末尾

请将您的js代码包装到

$(function(){

// your code 
});
会的

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

$(函数(){
$(“#目标”).blur(函数(){
警报(“调用了.blur()的处理程序”);
});
});

以下是参考资料,请将其添加到就绪函数中


$(文档).ready(函数(){
$(“输入”).blur(函数(){
警报(“此输入字段已失去焦点。”);
});
});
输入您的姓名:
在输入字段中写入内容,然后在字段外单击以失去焦点(模糊)


在呈现
输入
元素之前,您的JavaScript正在运行,因此没有可附加事件的内容。将脚本移动到页面末尾或将其包装在
$(function(){…})
中。执行后者会使脚本在执行之前等待浏览器触发的
DOMReady
事件

备选案文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>

$(“#目标”).blur(函数(){
警报(“调用了.blur()的处理程序”);
}); 
备选案文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>

$(函数(){
$(“#目标”).blur(函数(){
警报(“调用了.blur()的处理程序”);
}); 
});

由于您的脚本在输入元素生成之前运行,请将脚本放在底部或使用
$(document).ready
。它可以在JSFIDLE中工作,因为默认情况下,您放在js框中的代码是run onloadscript,如果没有获得目标id,请将脚本放在正文底部谢谢。我知道这会很简单!