單擊瀏覽器的自動建議選項時運行jQuery功能

Question

我當前的代碼將輸入字段邊框的顏色更改爲綠色（如果它是有效的電子郵件），如果它是無效的電子郵件，則將其改爲紅色。
HTML：

<input class="ui_input2 no_space" id="input_email" type="email" name="email" style="height:25px; width:300px; font-size:16px;" required /> 

的jQuery：鍵入時

$(document).ready(function() { 
    $('#input_email').keyup(function() { 
     var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/; 
     var val_i_email = $("#input_email").val(); 

     var empty = false; 
     $('#input_email').each(function() { 
      if (val_i_email < 5 || !emailReg.test(val_i_email)) { 
       empty = true; 
      } 
     }); 

     if (empty) { 
      $(this).addClass("invalid"); 
      $(this).removeClass("valid"); 
     } else { 
      $(this).addClass("valid"); 
      $(this).removeClass("invalid"); 
     } 
    }); 
}); 

一切完美，但如果你點擊一個選項（例如：以前使用的電子郵件），邊框的顏色似乎並沒有改變，除非你編輯了一下文字。

屏幕截圖：

我點擊上面突出顯示的選項。下面是結果： -

有沒有辦法來點擊自動提示選項時，再次運行另一個函數或相同的功能？

jsfiddle

Answer 1

只是使用的oninput代替keyup

$('#input_email').on('input',function(e){ 
... 
}); 

http://jsfiddle.net/ouadie/7bmrb/3/

注：的oninput事件在Internet Explorer從版本支持

Answer 2

我建議使用on()綁定多個事件，試圖覆蓋該寄存器輸入用戶事件的範圍：

$('#input_email').on('change input paste keyup', function(){ 
    /* do things here */ 
});