2011年1月27日 星期四

jQuery 無法同時使用 .change() 與 .keyup()

在修改一段 jQuery 程式時,發現如果同時去攔一個物件的 .change() 與 .keyup() 事件,會造成 .change() 失效。譬如以下面這段程式來說,理論上,你在輸入方塊敲字時,應該都會觸發 .change() 與 .keyup(),但事實卻不然!

<html>
<head>
<script src="http://code.jquery.com/jquery-1.4.4.js"></script> 
<script>

  $(function(){

       $(".upper").keyup(function(evt){
   alert('keyup');
       }).change(function(e){
          alert('change');
       });
   });

</script>
</head>
<body>
<input type="text" id="tbxTest1" class="upper" >

</body>
</html>

jQuery 的 .change() 與 .keyup() 事件對應到 javascript 分別是 onchange 與 onkeyup。在過去,這兩位 onchange 與 onkeyup 就已經是水火不容了,而在 jQuery 也是依然死性不改。關於這一點,可以參考微軟的解釋:官網出處

This event is fired when the contents are committed and not while the value is changing. For example, on a text box, this event is not fired while the user is typing, but rather when the user commits the change by leaving the text box that has focus. In addition, this event is executed before the code specified by onblur when the control is also losing the focus.
The onchange event does not fire when the selected option of the select object is changed programmatically.
所以,為了避免這兩個天生的冤家,建議如果您不嫌棄.blur() 的話, 將 .change() 改成 .blur(),就可以順利執行了。

沒有留言:

張貼留言