小雕雕的家

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

事情是這樣子的~~

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

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

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

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

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

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

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

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

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

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