toggle-password is not working if i clicked on the edit option

Question

The first time toggle-password is working fine, but when I click on 'edit model' the model will open. After closing the model the toggle-password in the table is not working. I don't why it is not working. Can anyone please help me.

$(".toggle-password").click(function() {
  $(this).toggleClass("fa-eye fa-eye-slash");
  var input = $($(this).attr("toggle"));
  if (input.attr("type") == "password") {
    alert('test');
    input.attr("type", "text");
  } else {
    input.attr("type", "password");
  }
});

<td>
  <?php
    if($auth_details['auth_key'] != "")
    {
      $r_id = $auth_details['id'];
      $ak = $auth_details['auth_key'];
      echo "<div class='form-group'>
          <div class='row'>
            <div class='col-md-12'>
              <div class='input-group'>
                <input class='form-control' id='auth_keyt_".$r_id."' value='".$ak."' name='auth_keyt_".$r_id."' type='password' required autocomplete='off' style='border:none;'/>
                <div class='input-group-addon' style='background:none;border:none;'>
                  <span toggle='#auth_keyt_".$r_id."' class='fa fa-fw fa-eye field-icon toggle-password'></span>
                </div>
              </div>
            </div>
          </div>
        </div>";
    }
    else 
    {
      echo '';
    }
  ?>
</td>

Note that `toggle` is not a valid attribute of the `span` element. You should use `data` attributes instead, better yet get rid of the dynamically created `id` and just use DOM traversal instead. — Rory McCrossan, Mar 18 '20 at 14:07

score 0 · Answer 1 · answered Mar 18 '20 at 13:52

Update your code as like following. This will to trigger events for asynchronous elements.

$(document).on("click", ".toggle-password", function() { 
    $(this).toggleClass("fa-eye fa-eye-slash");
    var input = $($(this).attr("toggle"));
    if (input.attr("type") == "password") {alert('test');
        input.attr("type", "text");
    } 
    else {
        input.attr("type", "password");
    }
});

toggle-password is not working if i clicked on the edit option

1 Answers1