Блог

Главная - Вопросы по программированию - кнопка для создания нового div, который уже существует

кнопка для создания нового div, который уже существует

#javascript #jquery #html #css

#javascript #jquery #HTML #css

Вопрос:

 <form>    
<fieldset>
      <legend>DownTime</legend>
      <div id="downtime">
      Start of DownTime:
      <input type="time" name="startdowntime">
      Reason:
      <select type="text" name="reason">
      <option>Reason1</option>
      <option>Reason2</option>
      <option>Reason3</option>
      <option>Reason4</option>
      </select>
      End of DownTime:
      <input type="time" name="stoptdowntime">
      <br>
      </div>
      </br>
      <button type="button">Add another DownTime</button><br>
      </fieldset>
      <br>
      <fieldset>
</form>

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

Мне нужно добавить функцию к созданной мной кнопке? Используя кнопку, я хочу добавить ‘n’ количество записей простоя.

Комментарии:

1. Если вы это сделаете, вам нужно изменить это: <div id="downtime"> с помощью this: <div class="downtime"> . Идентификатор должен быть уникальным, поэтому, если вам нужно создать несколько экземпляров, вы не можете использовать идентификатор так, как вы это делаете. Вы можете использовать Jquery для клонирования элемента и добавления его в dom при каждом нажатии кнопки.

Ответ №1:

 <form>    
<fieldset>
      <legend>DownTime</legend>
     <div id="parentdiv">
      <div class="downtime">
      Start of DownTime:
      <input type="time" name="startdowntime">
      Reason:
      <select type="text" name="reason">
      <option>Reason1</option>
      <option>Reason2</option>
      <option>Reason3</option>
      <option>Reason4</option>
      </select>
      End of DownTime:
      <input type="time" name="stoptdowntime">
      <br>
      </div>
      </br>
      </div>
      <button type="button" id="addbtn">Add another DownTime</button><br>

      <fieldset>
</form>

С помощью Jquery и ES6:-

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

<script>
var html = `
   <div class="downtime">
          Start of DownTime:
          <input type="time" name="startdowntime">
          Reason:
          <select type="text" name="reason">
          <option>Reason1</option>
          <option>Reason2</option>
          <option>Reason3</option>
          <option>Reason4</option>
          </select>
          End of DownTime:
          <input type="time" name="stoptdowntime">
          <br>
          </div>
          </br>
`;
$("#addbtn").click(function(e){
    $("#parentdiv").append(html);
});

</script>

Комментарии:

1. Это приведет к дублированию ID's … Идентификаторы должны быть уникальными и оттачиваться, это ужасный способ воссоздания этих элементов.

2. Я уже указывал на эту проблему в своем комментарии, вы должны сначала прочитать, что написано, прежде чем отправлять ответ

3. извините .. теперь я отредактировал свой ответ .. сэр, если это ужасный способ, пожалуйста, укажите правильный путь

4. @RajeshPatel Я сделаю это, когда увижу попытку (ы) из OP. Я не просто выкидываю бесплатный исходный код. Мне нравится видеть, что этот человек пытался и хотел помочь себе, прежде чем я попытаюсь помочь им дальше. Ключом к обучению является попытка, а не копирование / вставка, и поскольку цель получения ответа от stackoverflow — учиться у них…. Я чувствую, что лучше подождать, пока вопрос будет отредактирован, чтобы отобразить соответствующую информацию.

5. @NewToJS теперь это решение «Crackford» !