Question

我为表单输入字段编写了验证，除了填充了Google自动完成功能的地址字段外，一切正常。我看到类似的帖子，如果更改来自功能而不是用户，此事件不会触发，我知道我应该使用创建和调度事件，但我尝试将其组合到我的代码中的所有内容都没有用，所以如果有人可以提供帮助

我使用此代码为字段填充函数创建事件：

el = document.getElementById('route');
ev = document.createEvent('Event');
ev.initEvent('change', true, false);
el.dispatchEvent(ev);

这是我需要捕捉新事件的JQuery：

$.each(obj, function(key){

$("#"+key+"").on("change blur", function(){

    //Check if empty
    if(this.value==''){
        if($(this).parent().hasClass("has-error")){
            return false;
        }else{if($(this).parent().hasClass("has-success")){
                $(this).parent().removeClass("has-success");
                $(this).parent().find('span#glyph-ok').remove();
            }else{//Check if already was wrong
                $(this).addClass('form-control');
                $(this).parent().addClass('has-error');
                $(this).parent().append('<span id="glyph-error" class="glyphicon glyphicon-remove form-control-feedback"></span>');
                $(this).parent().append('<div class="error-hint-empty alert alert alert-warning"><span class="warning-glyph glyphicon glyphicon-warning-sign"></span>You must input '+$("#"+key+"").parent().find('label').text()+'!</div>');
                if($(this).parent().hasClass("has-success")){
                        $(this).parent().removeClass("has-success");
                        $(this).parent().find('span#glyph-ok').remove();
                }
            }
        }
    }else{
        if($(this).parent().hasClass("has-success")){return false;}else{//Check if already was ok
        $(this).addClass('form-control');
        $(this).parent().addClass('has-success');
        $(this).parent().append('<span id="glyph-ok" class="glyphicon glyphicon-ok form-control-feedback"></span>');
        if($(this).parent().hasClass("has-error")){
                $(this).parent().removeClass("has-error");
                $(this).parent().find('span#glyph-error').remove();
                $(this).parent().find('span#text-error').remove();
                $(this).parent().find('div.error-hint-empty').remove();
            }
        }
    }//End if empty

    //Check patterns and types

});//End of events

});//End of each empty field notification

Answer 1

以编程方式更改元素的值时，不会触发change事件。它是通过元素的用户交互触发的，而这种交互并不是通过JavaScript实现的。

https://developer.mozilla.org/en-US/docs/Web/Reference/Events/change

如果您希望在脚本中触发事件，则需要使用$('route').change()

手动触发该事件

如果更改来自其他功能，则更改事件不会触发

1 个答案: