關於jQuery .blur()
又是好一陣子沒寫文章了，每每寫文章就是又遇到Bug之類的。
好吧！說重點。
最近遇到jQuery的一個現象。
我有個文字型態的input，他有著onblur的事件，裡面會有Ajax事件。
由於功能需求，需要script去觸發onblur事件，
自然而然，我透過jquery去下 .trigger(‘blur’) 或 .blur()
昨天赫然發現，我的Ajax的Request居然發送了兩次。
追查後發現：stackoverflow 這篇文章。
在我們input上，如果已經先寫了onblur事件：
1: <input type='text' id='tbxName' onblur="javascript:Log('1')">
此時，透過jquery 觸發blur後，console會記錄到兩筆資料
1: function Log(logtxt){
2: console.log(logtxt);
3: }
4:
5: $(function(){
6: $("#tbxName").blur();
7: });
雖然stackoverflow上說，jQuery .blur會同時觸發blur focusout，但，我心中OS是：我也沒寫onfocusout事件阿！！
時間緊迫，抓破了腦到還是不知道真實原因，期望有緣人可以為我說明。
先解決如何只觸發一次onblur事件吧！！
會發生問題的情況是：
當Input上已經寫了onblur事件 加上 透過jQuery .trigger('blur') / .blur()
方法一：透過原生javascript觸發
1: $(function(){
2: //$("#tbxName").blur();
3: document.getElementById('tbxName').onblur();
4: });
方法二：onblur事件透過jQuery附加，不寫在input中
1: //Html
2: //<input type='text' id='tbxName'>
3:
4: function Log(logtxt){
5: console.log(logtxt);
6: }
7:
8: $(function(){
9: $("#tbxName").on( "blur", function() {
10: Log('1');
11: });
12: $("#tbxName").blur();
13:
14: });
前端，真的很神奇。