jQuery 事件方法不触发的解决方法

jQuery 的事件方法诸如 click(),blur(),change() 等方法。

踩坑场景

以前也使用过 jQuery 的事件方法,也觉得非常好用。昨天在一个 SSM 项目中使用 jQuery 的 blur() 方法来给一个元素绑定 onblur 事件。但我测试的时候怎么都不触发,也百度了很多方法,都不见效。终于在一篇问答中找到了一些思路。(参考网址:https://ask.csdn.net/questions/213270?sort=id)

这是我写的测试代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <!-- 引入 jQuery -->
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        $("#test").blur(function () {
        	alert("test2");
    	});
    </script>
</head>
<body>
    <input type="text" id="test">test</input>
</body>
</html>

idea 中也对代码有警告

img

这里无论怎么获取和失去焦点,事件都不触发。可能很多写前端的大佬一眼就看出来是什么问题了,奈何我前端方面就是个小白,正在往全栈工程师前进。下面看看我们的解决思路把。

解决思路

我们先来看看这篇问答中的一个回答

image-20200516113218367

看到这个回答,可能有很多小伙伴还是懵逼的,我标签不是 ajax 添加的,但还是不能用 click() 方法。别急,容我慢慢解释。

相比于 click()方法,jQuery 的 on() 方法也是给元素绑定事件的,但 on() 方法添加的事件处理程序适用于当前及未来的元素(比如脚本创建的元素)。到这里,我们就要聊一聊 html 页面的加载机制了。

html 页面是从上到下加载的,下载和渲染是同时进行的。如果上面的元素没有加载完成,则下面的元素会延后加载。

所以回到我们的主题——jQuery 事件方法不触发。jQuery 事件方法不触发的原因就可能是我们写的事件方法的 js 代码在元素加载之前就已经加载了!那么,回看刚刚我的测试代码,解决方法就一目了然了——就是触发事件先于元素加载,导致元素无法绑定事件(因为$("#test")这时候都获取不到元素)

(等下,这坑好像就是我刚学 js 时没有使用windows.onload的场景,震惊.jpg)

image-20200516120652333

这时候又要小伙伴有疑问了,那在元素加载之前定义了一个 function ,在元素标签中绑定事件怎么又可以触发事件呢?

比如如下代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery</title>
    <!-- 引入 jQuery -->
    <script src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        function testClick(){
            alert("test");
        }
    </script>
</head>
<body>
    <!-- 绑定testClick()函数触发click事件 -->
    <input type="text" id="test" onclick="testClick">test</input>
</body>
</html>

这还得从 html 的加载机制说起。**由于 html 加载时由上往下加载,在 html 加载的时候,遇到 function 关键字声明一个函数的时候,就会在内存中开辟出一个新的空间来对函数进行存储,方便以后进行调用。**所以我们绑定的事件函数定义在元素的前面是可以触发的。而刚刚的 blur() 方法是调用而不是声明。

解决方法

  1. 检查事件函数语法是否正确,选择器的选取是否正确(比如id选择器要有#)。若不正确,修改即可。

  2. 触发事件是否先于元素进行加载了。若是则有以下几种解决方法

    1. 使用 window.onload 使得绑定事件的方法在页面加载完成后再绑定

      window.onload = function(){
      	$("#test").blur(function () {
              	alert("test1");
          });
      }
      
    2. 使用 jQuery 的 ready() 方法

      $(document).ready(function () {
          $("#test").blur(function () {
              alert("test2");
          });
      });
      

      或者使用 ready() 的简化写法

      $(function () {
          $("#test").blur(function () {
              alert("test3");
          });
      });
      
    3. 使用 jQuery 的 on() 方法

      正如那篇问答的回答一样, jQuery 1.9 版本以上的使用 on() 方法来绑定事件,1.9 之前的版本使用 live()、bind() 等方法绑定事件

      $(document).on("blur","#test",function () {
          alert("test4");
      });
      
    4. 将绑定事件的方法的 <script></script> 标签放到 <body> 标签末尾,或者是放在被绑定事件元素的后面

      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>jQuery</title>
          <!-- 引入 jQuery -->
          <script src="../js/jquery.min.js"></script>
      </head>
      <body>
          <input type="text" id="test">test</input>
          // 将绑定事件方法的script标签放到body的末尾
          <script type="text/javascript">
              $("#test").blur(function () {
              	alert("test2");
          	});
          </script>
      </body>
      </html>
      
  3. 其它原因:比如事件的冒泡,js文件的冲突(两个同名方法由于js文件加载顺序而冲突的问题)等原因。这些都是我所能想到的一些其它因素。因为我并不了解也没遇到过,大家可以去百度去找找其它原因。

  • 9
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值