javascript - JQuery change event does not fire on load on password field when remember password is enabled in chrome -

so here issue: on login form, if user has not entered in username , password, login button disabled. works fine. in chrome, if have remember password enabled, page load , username , password field populated, login button remain disabled. here js:

var submitbtn = $('#authsubmit');  $('#username').bind('keyup click mousedown paste change input',function(){         if ($('#username').val() != '' && $('#password').val() != '') {             submitbtn.removeattr('disabled');             submitbtn.removeclass('customdisabledbtn');             submitbtn.addclass('custombutton');         } else if($('#email').get(0)) {             if($('#username').val() != '' || $('#email').val() !== '') {                 submitbtn.removeattr('disabled');                 submitbtn.removeclass('customdisabledbtn');                 submitbtn.addclass('custombutton');             }         } else {             submitbtn.attr('disabled', 'disabled');             submitbtn.addclass('customdisabledbtn');         };     }); $('#password').bind('keyup click mousedown paste change input',function(){     if ($('#username').val() != '' && $('#password').val() != '') {         console.log($('#password').val());         submitbtn.removeattr('disabled');         submitbtn.removeclass('customdisabledbtn');         submitbtn.addclass('custombutton');     } else {         submitbtn.attr('disabled', 'disabled');         submitbtn.addclass('customdisabledbtn');     }; }); 

on page load, console.log not log anything. however, once click anywhere on page, function run again , console.log log correct password, , login button become enabled. not desired behaviour. if remember password enabled, login button should enabled when page loaded. have tried trigger click manually after function runs, no luck.

anyone know if there bug chrome in area? or doing wrong here?

here html:

<form id="authlogin" name="authlogin" method="post" action="/auth/dologin">     <fieldset id="formfieldset">                 <p class="formfield contenttexticons">                     <label for="username"><?= $this->sitelabels['username']; ?>:</label>                     <input type="text" id="username" name="username" />                 </p>                 <p class="formfield contenttexticons">                     <label for="password"><?= $this->sitelabels['password']; ?>:</label>                     <input type="password" id="password" name="password" />                 </p>             </fieldset>             <div class="loginbtns clearfix">                 <p class="loginbtn">                     <button id="authsubmit" class=""><?= $this->sitelabels['signinbtn']; ?></button>                 </p>             </div>         </form> 

here fiddle: https://jsfiddle.net/jbekis/2hbvv95r/3/

but issue in chrome when have password remembered, function not see until after click anywhere on screen.

in jsfiddle have following first

if($('#username').val() == '' && $('#password').val() == ''){     submitbtn.attr('disabled', 'disabled');     submitbtn.addclass('customdisabledbtn'); } 

which intends disable button. notice following condition disable button if both fields empty

$('#username').val() == '' && $('#password').val() == '' 

you want disable function if any of both empty, should be

$('#username').val() == '' || $('#password').val() == '' 

which produces desired behaviour in jsfiddle said correction

also should consider abstracting behaviour of disabling button function avoid code repetition