Jquery - Динамический флажок / радиокнопки - Добавить дополнительные параметры - PullRequest
Новая
       24

Jquery - Динамический флажок / радиокнопки - Добавить дополнительные параметры

0 голосов
/ 27 мая 2018

Я создаю приложение для создания собственной формы с помощью JQuery.Я хочу добавить больше опций на флажок и вопросы типа радио.По какой-то причине последняя функция не работает.Он предназначен для добавления новой опции при нажатии на кнопку, созданную в первой функции.

//Adding a checkbox question
$("#addCheckboxQuestion").click( function(){
$("#rectangle").before("<br><input type='text'placeholder='Question'> <input type='checkbox'> <input type='text' placeholder='Opção'> <button class='btn newOption'>+</button>");
});

//Adding a new option
$(".newOption").click( function(){
console.log("+ radiobutton");
$(this).before("<input type='checkbox'> <input type='text' placeholder='Option'>");
});

Я попытался поместить "onclick = ''" непосредственно на кнопку и выполнить обычную функцию javascript, и она работала нормально.Проблема в том, что если у меня есть несколько вопросов типа флажка, новые опции будут добавлены только к первому вопросу.

1 Ответ

0 голосов
/ 27 мая 2018

Обновление: Мне кажется, я понимаю ваш вопрос сейчас. Проверьте новый код.

Возможно, это не очень красивое решение, но это должно сработать.

Создание элемента с jQuery, чем присоединение события, чем присоединениеновый элемент с событием в DOM.

Я добавил немного HTML, чтобы пример мог работать здесь. 

$("#btn1").click( function(){
var question = $("<div><input type='text'placeholder='Question'> <input  type='checkbox'> <input type='text' placeholder='Opção'><button class='btn newCheck'>Add Option</button></div>");

    $("#rectangle").before(question);
    
    $(question).find(".newCheck").click( function(){
      console.log("+ radiobutton");

      $(this).before("<input type='checkbox'> <input type='text' placeholder='Option'>");
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="btn1">Add Question</button>
<div id="rectangle"></div>
...