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文件加載順序而沖突的問題）等原因。這些都是我所能想到的一些其它因素。因為我並不了解也沒遇到過，大家可以去百度去找找其它原因。