jQuery 和 Bootstrap 显示密码不适用于动态表单答案

【问题标题】：jQuery & Bootstrap show password not working with dynamic formsjQuery 和 Bootstrap 显示密码不适用于动态表单
【发布时间】：2018-10-17 19:32:08
【问题描述】：

我正在尝试使用 jQuery 和 Bootstrap 在动态创建的表单上显示/隐藏密码，但我很难让脚本“看到”动态表单。

我可以使用按钮添加新的论坛输入，并且“眼睛”是可见的，但单击眼睛不会切换密码可见性。

如何让每个输入元素都有自己的密码切换？

如果我还在学习 JS 并希望尽可能多地学习，因此能解释一下解决方案会很棒。

这是我目前所拥有的。

<!DOCTYPE html>
<html lang='en' class=''>

<head>
  <meta charset='UTF-8'>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

  <!-- HIDDEN DYNAMIC ELEMENT TO CLONE - server info -->
  <div class="form-group dynamic-element-server" style="display:none">
    <div class="row">

      <div class="col-md-4">
        <input id="password1" class="form-control password1" type="password" name="serverpass[]" value="123">
      </div>
      <div class="col-md-1">
        <p class="delete">DELETE</p>
      </div>
    </div>
  </div>
  <!-- END OF HIDDEN ELEMENT -->


  <div class="form-container">
    <form class="form-horizontal">
      <fieldset>

        <legend class="title">Servers</legend>

        <div class="dynamic-stuff-server">
          <!-- Dynamic element will be cloned here -->
          <!-- You can call clone function once if you want it to show it a first element-->
        </div>

        <div class="form-group">
          <div class="row">
            <div class="col-md-12">
              <p class="add-one-server add-button"><button type="button" class="btn btn-primary"><i class="fas fa-plus"></i> server</button></p>
              <hr>
            </div>
          </div>
        </div>
      </fieldset>
    </form>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.1.2/bootstrap-show-password.js'></script>
  <script>
    //Clone the hidden element and shows it			
    $('.add-one-server').click(function() {
      $('.dynamic-element-server').first().clone().appendTo('.dynamic-stuff-server').show();
      attach_delete();
    });

    //Attach functionality to delete buttons
    function attach_delete() {
      $('.delete').off();
      $('.delete').click(function() {
        console.log("click");
        $(this).closest('.form-group').remove();
      });
    }
    $(".password1").password({
      eyeClass: "fa",
      eyeOpenClass: "fa-eye",
      eyeCloseClass: "fa-eye-slash"
    });
  </script>
  </body>

</html>

【问题讨论】：

它的实现方式你有几个密码字段都具有相同的 ID = "password1" 这是错误的。为您的密码字段指定一个类并使用该类名来选择所有密码字段。
@NawedKhan 哎呀，我忘了把它改成一个类，但是当它是一个类时你也会得到相同的结果。它就像 JS 不识别实时注入的元素。它还需要以独特的方式定位密码字段，以免同时显示所有密码输入。
您需要使用事件委托来触发动态创建的元素上的事件
正如 Michael 和 Ercan 所说，每次添加新克隆时都需要调用密码。我会将整个 $('.password1').password() 代码移动到一个函数中，并在 onload 时调用该函数，然后在添加服务器函数中再次调用。

标签： javascript jquery html twitter-bootstrap bootstrap-4

【解决方案1】：

您应该为每个添加的元素运行password() 函数。所以要为密码ID保留一个计数器。另外，不要在负载上运行password()。

var counter=1;
$('.add-one-server').click(function () {
counter+=1;
var newElementId='password'+counter;

var newElement= $('.dynamic-element-server').first().clone();
  newElement.find('.password1').attr('id',newElementId);
              newElement.appendTo('.dynamic-stuff-server').show();
              attach_delete();
  
   $("#"+newElementId).password({
                eyeClass: "fa",
                eyeOpenClass: "fa-eye",
                eyeCloseClass: "fa-eye-slash"
            });
            });

            //Attach functionality to delete buttons
            function attach_delete() {
              $('.delete').off();
              $('.delete').click(function () {
                console.log("click");
                $(this).closest('.form-group').remove();
              });
            }

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css'>
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css" integrity="sha384-5sAR7xN1Nv6T6+dT2mhtzEpVJvfS3NScPQTrOxhwjIuvcA67KV2R5Jz6kr4abQsz" crossorigin="anonymous">

        <!-- HIDDEN DYNAMIC ELEMENT TO CLONE - server info -->
        <div class="form-group dynamic-element-server" style="display:none">
            <div class="row">

                <div class="col-md-4">
                        <input id="password1" class="form-control password1" type="password" name="serverpass[]" value="123">
                </div>
                <div class="col-md-1">
                    <p class="delete">DELETE</p>
                </div>
            </div>
        </div>
        <!-- END OF HIDDEN ELEMENT -->


        <div class="form-container">
            <form class="form-horizontal">
                <fieldset>

                    <legend class="title">Servers</legend>

                    <div class="dynamic-stuff-server">
                        <!-- Dynamic element will be cloned here -->
                        <!-- You can call clone function once if you want it to show it a first element-->
                    </div>

                    <div class="form-group">
                        <div class="row">
                            <div class="col-md-12">
                                <p class="add-one-server add-button"><button type="button" class="btn btn-primary"><i class="fas fa-plus"></i> server</button></p>
                                <hr>
                            </div>
                        </div>
                    </div>
                </fieldset>
            </form>
        </div>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script>
        <script src='https://cdnjs.cloudflare.com/ajax/libs/bootstrap-show-password/1.1.2/bootstrap-show-password.js'></script>

【讨论】：

感谢您提供此示例并解释它按预期工作。