简单的jQuery模糊功能不起作用

我有一个那些时刻是我无法得到一个简单的代码工作。尽管花费了一个多小时，但我无法获得这段代码的工作。简单的jQuery模糊功能不起作用

<!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上工作。

来源

2015-06-14 Michael LB

因为你的脚本运行的输入元件由之前，要么把脚本底部或使用'$（文件）。 ready'。并且它会在jsFiddle中工作，因为默认情况下，您在js框中放置的代码是运行onload –

脚本没有获取目标id，请将脚本放在主体的底部 – Newinjava

$(function(){ 

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

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

    }); 
});

你需要更新你的脚本到类似上面写的。这是添加一个包装。

你正在绑定一个事件使用jQuery。然而，当你的脚本执行的时候，并不是必须的，那么jquery已经被加载了，因此绑定不会发生，因此函数不会被触发。

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

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

来源

2015-06-14 16:53:02 nikhil

谢谢。我知道这会很简单！ –

欢迎你迈克尔。 – nikhil

放功能的document.ready

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

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

或者把身体

来源

2015-06-14 16:53:23 user3227295

末的脚本标记请把你的js码换成

$(function(){ 

// your code 
});

它会是

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

这里是参考https://api.jquery.com/ready/

来源

2015-06-14 16:54:03 user86745458

添加它在待机功能

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

来源

2015-06-14 16:55:08

JavaScript是运行input元素呈现之前，所以没有什么将活动附加到。请将您的脚本移动到页面的末尾或将其包装在中。执行后者会使脚本在执行前等待浏览器触发的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>

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

来源

2015-06-14 17:00:57

简单的jQuery模糊功能不起作用

回答

相关问题