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

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

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

踩坑场景

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

这是我写的测试代码

    
    
    
    
    


    test

idea 中也对代码有警告

image

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

解决思路

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

image

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

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

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

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

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

image

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

比如如下代码

    
    
    
    
    


    
    test

这还得从 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. 将绑定事件的方法的 标签放到 标签末尾，或者是放在被绑定事件元素的后面

      
      
      
          
          
          
          
      
      
          test
          // 将绑定事件方法的script标签放到body的末尾
          
      
      
      

3. 其它原因：比如事件的冒泡，js文件的冲突（两个同名方法由于js文件加载顺序而冲突的问题）等原因。这些都是我所能想到的一些其它因素。因为我并不了解也没遇到过，大家可以去百度去找找其它原因。