其他分享
首页 > 其他分享> > 关于jQuery事件绑定放在head中没有响应的问题

关于jQuery事件绑定放在head中没有响应的问题

作者:互联网

1、问题代码如下

<html lang="en<head>

    <meta charset="UTF-8">
<title>Title</title>
<script src="https://code.jquery.com/jquery-1.12.4.min.js"
integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
crossorigin="anonymous"></script>
<script>
$(":text").blur(function () {
$.post("/ajax_jq/", {username:"alex"}, function (data) {
$(".error").text(data);
})
});
</script>
</head>
<body>
<form>
<p><label>用户名:</label><input type="text" name="username">
<br />
<span class="error"></span>
</p>
<p><label>密码:</label><input type="password" name="password"></p>
<p><input type="submit" value="提交"></p>
{% csrf_token %}
</form>
</body>
</html>

2、异常说明
  本段代码功用是:当输入完用户名,在失去焦点后,用jQuery实现异步加载,判断用户名已存在,但是尝试了半天都没有发送异步请求。

3、解决方案
  将事件调用放在$(document).ready(function(){
  // code
}
);
或者
$(
function(){
// code
}
)或者
将事件调用的script标签放在body标签最下面

 4、收获

  如果没有将script代码中的代码放在加载函数中(加载函数:加载完文档后,才开始执行加载函数里面的代码)或者head标签最底层,那么浏览器在

解释HTML文档时,就会先给一个元素绑定一个事件,但是由于该元素还没有加载出来,就会导致事件绑定在一个不存在的元素上,使执行结果与预期大相径庭。

 5、提示

  以后再在HTML中写js的时候,最好将js代码放在加载函数或者head标签最底层。 

标签:jQuery,function,head,用户名,没有响应,代码,标签,加载
来源: https://www.cnblogs.com/loveprogramme/p/10822652.html