javascript - 如何在 JQuery 中单击单选按钮后追加一个部分？

Question

问题来了。我需要在用户单击单选按钮后 append 一个部分。然后，如果用户单击这个新的 append 部分中的单选按钮，我需要 append 另一个部分。我的代码不起作用。我做错了:(感谢您的帮助!!!

<section class="input_1">
<input type="datetime-local"><br/>
<input id="add_1" type="radio" value="1" name="q1">yes
<input id="del_1" type="radio" value="0" name="q1" >no
<br />
</section>


$(document).ready(function() {
 var max_fields = 2;
 var x = 1;

 $(document).on("click", "#add_1", function(e) {
 e.preventDefault();
 if (x < max_fields) {
  x++;
  $(".input_1").append('<section class="input_2">-.-.-<br/><input type="datetime-local"><br /> 
<input type="datetime-local"><br/>
<input id="add_2" type="radio" value="1" name="q2">yes
<input id="del_2" type="radio" value="0" name="q2" >no
</section>');
  })
 }
 });
});

$(".input_1").on("click", "#del_1", function(e) {
  e.preventDefault();
  $(this).parent('section').remove();
  x--;
  })
 });

//level 2
$(document).ready(function() {
 var max_fields_2 = 2;
 var x = 1;

  $(document).on('click', '.add_2', function(e) {
  e.preventDefault();
  var wrapper_2 = $(".input_2");
  if (x < max_fields_2) {
  x++;
  $(wrapper_2).append('<section>-.-.-<br/><input type="datetime-local"><a href="#" class="del_2">Remove</a><br /> <button class="add_3">return 2</button> </section>');
   $(wrapper_2).on("click", ".del_2", function(e) {
    e.preventDefault();
    $(this).parent('section').remove();
    x--;
   })
  }
  });
 });

编辑这是根据vlk提供的解决方案的代码的替代版本

 <input type="datetime-local"><br/>
 <input id="add_1" type="radio" value="1" name="q1" onclick="appendNewDiv()" ><label for="add_1">yes</label>
 <input id="del_1" type="radio" value="0" name="q1" onclick="removeDiv($(this))"> <label for="add_del">no</label>
  <br />
  <div class="container"></div>

JavaScript 
 var newDiv

 function appendNewDiv(){
  newDiv = '<div><p>This is a new div</p>';
  newDiv += '<label><input onclick="appendNewDiv()" '
  newDiv += 'type="radio">Add Another Div</label>'
  newDiv += '<label><input onclick="removeDiv($(this))" '
  newDiv += 'type="radio">Remove Div</label></div>'
  $('.container').append(newDiv);
 }

function removeDiv(radio){
  radio.closest('div').remove()
 }

Answer 1

尝试像这样非常简单的事情。 使用内联事件调用

onclick="yourFunction()"

append div 使其更智能且代码更少。

为新的 div 创建一个变量，如下所示

var newDiv = '<div>Hello</div>';

var newDiv;

function appendNewDiv(){
  newDiv = '<div><p>This is a new div</p>';
  newDiv += '<label><input onclick="appendNewDiv()" ';
  newDiv += 'type="radio">Add Another Div</label></div>';
  $('.container').append(newDiv);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label>
    <input onclick="appendNewDiv()" id="radio1" type="radio">
    Add Div
<label>
<div class="container"></div>