Добавить поле ввода с помощью jQuery

Question

Добавить поле ввода с помощью jQuery

0

Я новичок в jQuery, так что все еще пытаюсь обернуть голову вокруг того, как это работает.

Я создаю административную панель, где администратор может вставить некоторые вопросы. Поскольку это не фиксированная сумма, администратор должен иметь возможность добавлять или удалять дополнительные поля ввода, поэтому администратор может выбрать интересующие вас вопросы.

Вот как это выглядит графически:

И это код:

            <div class="adinputfield90">
            <input type="text" placeholder="Insert question 1"> <span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span></input>
            </div>

Класс span содержит изображение, поэтому новый ввод - это еще один веб-сайт.

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

Вся помощь приветствуется!

Morten Hjort 11 март 2014, в 11:10

Источник

0

возможно дублирование Добавить / удалить поле ввода динамически с помощью jQuery
gpgekko 11 март 2014, в 10:01

Теги:

jquery

3 ответа

Ещё вопросы

возможно дублирование Добавить / удалить поле ввода динамически с помощью jQuery

Prakash Bhagat · Answer 1 · 2014-03-11T08-55-00.000Z

Включите это в главный раздел страницы

<script>
$(function(){

  $('.adinputfield90 span').click(addTextBox);

});

function addTextBox(){
  $('.adinputfield90').append('<input type="text" placeholder="Insert question 1"> <span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span></input>');
  $('.adinputfield90 span').unbind('click');
  $('.adinputfield90 span').click(addTextBox);
}
</script>

Vineeth Bhaskaran · Answer 2 · 2014-03-11T08-23-00.000Z

 var template='<div class="adinputfield90">';
 template=template+'<input type="text" placeholder="Insert question 1"> 
 <span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span>
  </input>';
  template=template+'</div>'


  $("#htmlContainerId").append(template);

htmlContainerId - контейнер, в который мы вставляем содержимое. Это будет элемент, расположенный за пределами 'adinputfield90', то есть контейнер 'adinputfield90'

Rakesh Kumar · Answer 3 · 2014-03-11T07-32-00.000Z

Попробуй это.

$('.adaddnextremove').on('click', function(){
    $(this).parent().clone(true).appendTo('body');
    $('.remove').show();
    $('.adaddnextremove').hide();
    $('.adinputfield90').last().find('.remove').hide();
    $('.adinputfield90').last().find('.adaddnextremove').show();
});
$('.remove').on('click', function(){
    $(this).parent().remove();
});

Fiddle Demo