0

Имеется модальное окно. Задача при нажатии на кномку из выбора контактов,добавить инпут. Но добовляет его при одном нажатии целую кучу. Я не пойму проблему.

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- 
labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
    <div class="modal-content">
        <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">New message</h5>
            <button type="button" class="close" data-dismiss="modal" aria- 
label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        </div>
        <div class="modal-body">
            <div>
                <label>Контакты :  <button class="btn btn-secondary btn-sm" 
 id="clickButton" >+</button></label>
                <label>Навыки :  <button class="btn btn-secondary btn-sm">+ 
</button></label>
                    <div id="contact">
                        <button class="btn btn-secondary btn-sm" 
id="vk">VK</button>

                    </div>
            </div>
            <div>

            </div>
            <form class="form">

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label >Имя</label>
                        <input type="email" class="form-control">
                    </div>
                    <div class="form-group col-md-6">
                        <label >Фамилия</label>
                        <input type="password" class="form-control">
                    </div>
                </div>тщ

                <div class="form-row">
                    <div class="form-group col-md-6">
                        <label >Телефон</label>
                        <input type="email" class="form-control">
                    </div>
                    <div class="form-group col-md-6">
                        <label >Email</label>
                        <input type="email" class="form-control">
                    </div>
                </div>
            </form>

        </div>
        <div class="modal-footer">
            <button type="button" class="btn btn-secondary" data- 
dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary">Send 
message</button>
        </div>
    </div>
</div>
  </div>

файл js

$("#clickButton").hover(function() {
$("#contact").css('display', 'block');
});

$("#vk").click(function () {
$("div").append("<input type='text' placeholder='vk' id='vk'>");
});

введите сюда описание изображения

1
  • Указывать надо конкретный div куда нужно добавить input, а не все div-ы которые на старнице.
    – Kosta B.
    16 июл 2018 в 17:18

1 ответ 1

1

Задача при нажатии на кномку из выбора контактов,добавить инпут. Но добовляет его при одном нажатии целую кучу. Я не пойму проблему.

Указывать надо конкретный div куда нужно добавить input, а не все div-ы которые на старнице.

Вот такое решение:

$("#clickButton").hover(function() {
  $("#contact").css('display', 'block');
  console.log('clckButton');
});

$("#vk").click(function() {
  // Определёныый DIV
  $("div.additional-contacts").append("<input type='text' placeholder='vk' id='vk'><br>");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">New message</h5>
        <button type="button" class="close" data-dismiss="modal" aria- label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
      </div>
      <div class="modal-body">
        <div>
          <label>Контакты :  <button class="btn btn-secondary btn-sm" 
 id="clickButton" >+</button></label>
          <label>Навыки :  <button class="btn btn-secondary btn-sm">+ 
</button></label>
          <div id="contact">
            <button class="btn btn-secondary btn-sm" id="vk">VK</button>

          </div>
        </div>
        <div>

        </div>
        <form class="form">

          <div class="form-row">
            <div class="form-group col-md-6">
              <label>Имя</label>
              <input type="email" class="form-control">
            </div>
            <div class="form-group col-md-6">
              <label>Фамилия</label>
              <input type="password" class="form-control">
            </div>
          </div>тщ

          <div class="form-row">
            <div class="form-group col-md-6">
              <label>Телефон</label>
              <input type="email" class="form-control">
            </div>
            <div class="form-group col-md-6">
              <label>Email</label>
              <input type="email" class="form-control">
            </div>
          </div>

          <div class="form-row">
            <!-------- Можете спрятать если надо -------->
            <div class="form-group col-md-6 offset-md-6 additional-contacts">
              <label>Доп. Контакты:</label><br>

            </div>
          </div>

        </form>

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data- dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Send 
message</button>
      </div>
    </div>
  </div>
</div>

2
  • Спасибо,я новичек) очень очевидно( 16 июл 2018 в 17:29
  • 1
    @АнтонПрохоров мы все когда-то были новичками =)
    – Kosta B.
    16 июл 2018 в 17:37

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.