其實也不能說是 jQuery,因為 javascript 就是這樣

事情是這樣子的~~

今天在用 bootstrap 做板,然後想說用 jQuery 做些欄位判斷的時候遇到一些問題

假設版面長的像下圖這樣,輸入完密碼欄位 and 離開 input 焦點後觸發 onblur

然後 onblur 事件去檢查欄位正確性,正確就套用打勾,失敗就打叉

Clipboard02

然後因為使用者可能會重新輸入該欄位,所以我又綁了一個 onclick 事件

onclick 時清除打勾 + 欄位顏色提示

然後這樣就出事了......但是在IE 是可以正常動作,但在 chrome 是死的

但不管怎樣一定是 IE 的錯,chrome 一定是太嚴謹了

chrome 觸發 click 事件之後錯誤如下 : 

 Clipboard02

 字有點小,所以我直接摳比出來好了

Uncaught NotFoundError: Failed to execute 'appendChild' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in a 'blur' event handler?

 

有提到 blur,所以找了一下資料 + 自己猜測應該是事件順序的問題

先講一下解決方法有兩種,我是用第二種,因為方便又簡單

1. 在執行 blur 內容前,加上 setTimeout (避免比 click 還早執行)

2. 將 click 改成 mousedown 

 

至於為何會這樣......

老實講只知道是 blur 比 click 先執行,因為 click 是在 mouseup 之後才觸發的

(滑鼠點下去,放開才觸發)

所以把 click 改成 mousedown 就好了,因為滑鼠點下去就馬上觸發了

 

但是我這個例子好像有點難解釋......

因為我是在 blur 時給予 div,click 時要 remove

反正...........

以後如果有 blur + click 事件都要使用的話,就把 click 改成 mousedown 就好了

 

順便附上我的 code 

======================================================

$(document).ready(function () {

//定義一下成功與失敗樣式

var success_status = {

Div: "<div class=\"form-group has-success has-feedback\"></div>",

Icon: "<span class=\"glyphicon glyphicon-ok form-control-feedback\"></span>"

}

var error_status = {

Div: "<div class=\"form-group has-error has-feedback\"></div>",

Icon: "<span class=\"glyphicon glyphicon-remove form-control-feedback\"></span>"

}

$("#pwd").blur(function () {

changeStatus(this, success_status);

}).mousedown(function () {

input_init(this);

});

//狀態改變

function changeStatus(obj,status) {

$(obj).wrap(status.Div);

$(obj).after(status.Icon);

}

//狀態初始化

function input_init(obj) {

if ($(obj).parent().is("div")) {

$(obj).next().remove();

$(obj).unwrap();

}

}

});

 

參考資料 : 

http://stackoverflow.com/questions/10652852/jquery-fire-click-before-blur-event

http://rritw.com/a/bianchengyuyan/C__/20130426/346711.html

 

 

 

 

 

 

 

 

 

 

 

 

創作者介紹
創作者 小雕 的頭像
小雕

小雕雕的家

小雕 發表在 痞客邦 留言(0) 人氣()