Question

我遇到其中一个时刻，我无法获得一段简单的代码。尽管花费了一个多小时，我还是无法使用这段代码;

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

我通过HTML 5验证器运行我的代码，以确保它不是一些愚蠢的东西，我已经确保我使用的是最新版本的jQuery。奇怪的是，我可以让代码在jsFiddle上运行。

Answer 1

$(function(){

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

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

    });
});

您需要将脚本更新为上面所写的内容。那就是添加一个包装器。

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

你需要添加一个jquery准备好的包装器，这样可以确保在dom准备就绪后完成事件和脚本执行的所有绑定。

在这里，我为您创建了一个具有工作版本的plunker - http://plnkr.co/edit/Xhur8f1ur194ii6XlRby?p=preview

Answer 2

将其添加到就绪功能

＆＃13;

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

＆＃13;

Answer 3

将该功能放入document.ready

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

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

或者放置身体末端的脚本标签

Answer 4

请将您的js代码包装成

$(function(){

// your code 
});

它将是

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

以下是参考https://api.jquery.com/ready/

Answer 5

您的JavaScript在呈现$(function(){...})元素之前正在运行，因此没有任何内容可以将事件附加到。将脚本移动到页面末尾或将其包装在DOMReady中。执行后者会使脚本在执行之前等待浏览器触发的<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>事件。

选项1：

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

选项2：

ssh user@server -t

简单的jQuery模糊功能无法正常工作

5 个答案: