Triggering password() from another element does not work the first time

[hanxue]

bootstrap-show-password version: 1.0.2
jQuery version: 1.8.2

Here's the password element, as well as checkbox to toggle showing password

<p>
  <input type="password" 
    id="admin_pass" 
    name="admin_pass" 
    class="form-control" 
    data-placement="before" />
</p>
<p><label><input id="methods" type="checkbox" /> Show password</label></p>

The corresponding Javascript

 $(function() {
    $('#mysql_sel_1').click();
    $('#admin_pass').password().on('show.bs.password', function(e) {
        $('#methods').prop('checked', true);
    }).on('hide.bs.password', function(e) {
        $('#methods').prop('checked', false);
    });
    $('#methods').click(function() {
        $('#admin_pass').password('toggle');
    });
});

If I click on the show password button initially, it works

But if I click on the checkbox first, show password will not show any text

Programatically, I get the value of the password field

$('#admin_pass').password('val');
"password"

It's just showing as blank in the password field.

[xjchenhao]

Me too

[ghost]

Same problem.