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

注意：从版本 9 开始，Internet Explorer 支持 oninput 事件。更多信息

Answer 2

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

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