如何更改jQuery中的密码字段类型？

Question

I am trying to change the type of password field (change from password to text).The issue is that clicked Item (original example there is eye pic but the current demo I place a text see ) is present in after of the element.

Could I bind the after element? I am sure 100% we can't bind after element. So how will I toggle my password?

Here is my code https://jsbin.com/zeterucite/2/edit?html,css,js,output

$(function(){
  function signUpAgreeCheckedEventHandler(e) {
        e.preventDefault();
        e.stopPropagation();
    $('#signupConfirmPassword_js').attr('type','text')
        alert('--')
    }
  $('#signupConfirmPassword_js:after').click(signUpAgreeCheckedEventHandler)
})

Answer 1

As mentioned in comments, it is not possible to get the :after pseudo element by java script. but there are some workarounds for it like as applying pointer-events: none; on your main element and a pointer-events: all; on its pseudo element as you use in your demo code.

Another option is to add the click event handler for whole main element which includes the :after pseudo object and then use some xy calculations to determine if the click is over the main part or your pseudo element.

$('#myPassword').click( function(evt) {
  if (evt.clientX > $(this).offset().left + 100 { //assume input element width is 100px
    // ...
  }
});

You may use e.clientX, e.clientY, e.pageX/Y, $(this).offset().top/left, $(this).outerWidth/outerHeight ...