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 中也对代码有警告

image

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

解决思路

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

image

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

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

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

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

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

image

这时候又要小伙伴有疑问了，那在元素加载之前定义了一个 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() 方法是调用而不是声明。

解决方法

检查事件函数语法是否正确，选择器的选取是否正确（比如id选择器要有#）。若不正确，修改即可。

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

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

window.onload = function(){
  $("#test").blur(function () {
          alert("test1");
    });
}

使用 jQuery 的 ready() 方法

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

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

$(function () {
    $("#test").blur(function () {
        alert("test3");
    });
});

使用 jQuery 的 on() 方法

正如那篇问答的回答一样， jQuery 1.9 版本以上的使用 on() 方法来绑定事件，1.9 之前的版本使用 live()、bind() 等方法绑定事件
```
$(document).on("blur","#test",function () {
    alert("test4");
});
```

将绑定事件的方法的 <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>

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