zoukankan      html  css  js  c++  java
  • 关于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标签最底层。 

  • 相关阅读:
    Mysql优化
    RabbitMQ教程
    手把手Centos7 安装jenkins详细教程
    FreeMarker学习系列之一
    Vue学习之Vue模拟后台数据
    vuejs学习之新的components组件挂载
    vuejs学习之项目结构解读
    VueJS学习之Vue-cli项目模板
    菜鸟手把手学Shiro之shiro授权流程
    js基石之---es7的decorator修饰器
  • 原文地址:https://www.cnblogs.com/loveprogramme/p/10822652.html
Copyright © 2011-2022 走看看