单击浏览器的自动建议选项时运行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/

  

注意： Internet Explorer中版本支持oninput事件   9. more informations

Answer 2

我建议使用on()绑定多个事件，尝试覆盖注册条目的用户事件范围：

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