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 中也对代码有警告
这里无论怎么获取和失去焦点，事件都不触发。可能很多写前端的大佬一眼就看出来是什么问题了，奈何我前端方面就是个小白，正在往全栈工程师前进。下面看看我们的解决思路把。
解决思路
我们先来看看这篇问答中的一个回答
看到这个回答，可能有很多小伙伴还是懵逼的，我标签不是 ajax 添加的，但还是不能用 click() 方法。别急，容我慢慢解释。
相比于 click()方法，jQuery 的 on() 方法也是给元素绑定事件的，但 on() 方法添加的事件处理程序适用于当前及未来的元素(比如脚本创建的元素)。到这里，我们就要聊一聊 html 页面的加载机制了。
html 页面是从上到下加载的，下载和渲染是同时进行的。如果上面的元素没有加载完成，则下面的元素会延后加载。
所以回到我们的主题——jQuery 事件方法不触发。jQuery 事件方法不触发的原因就可能是我们写的事件方法的 js 代码在元素加载之前就已经加载了！那么，回看刚刚我的测试代码，解决方法就一目了然了——就是触发事件先于元素加载，导致元素无法绑定事件（因为$("#test")这时候都获取不到元素）
（等下，这坑好像就是我刚学 js 时没有使用windows.onload的场景，震惊.jpg）
这时候又要小伙伴有疑问了，那在元素加载之前定义了一个 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文件加载顺序而冲突的问题）等原因。这些都是我所能想到的一些其它因素。因为我并不了解也没遇到过，大家可以去百度去找找其它原因。