Question

我正在创建一个使用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功能，它运行正常。问题在于，如果我有几个复选框类型问题，新选项只会添加到第一个问题。

Answer 1

更新：我想我现在明白你的问题。 查看新代码。

这可能不是一个非常漂亮的解决方案，但这应该有用。

使用jQuery创建元素，而不是附加事件，而不是将带有事件的新元素附加到DOM上。

我添加了一些HTML，以便示例可以在这里运行。

＆＃13;

$("#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'>");
  });
});

＆＃13;

<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>

＆＃13;

Jquery - 动态复选框/ radiobuttons - 添加更多选项

1 个答案: