jQuery & Bootstrap показывает пароль, не работающий с динамическими формами - PullRequest
Новая
       2

jQuery & Bootstrap показывает пароль, не работающий с динамическими формами

0 голосов
/ 17 октября 2018

Я пытаюсь показать / скрыть пароли в динамически создаваемых формах, используя 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>

1 Ответ

0 голосов
/ 17 октября 2018

вы должны запустить password() функцию для каждого добавленного элемента.так что держите счетчик для паролей.также не запускайте 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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...