单击JQuery中的单选按钮后如何附加部分？

Question

Here's the problem. I need to append a section after the user clicks an radio button. Then I need to append another section if the use clicks the radio button in this new, appended section. My code doesn't works. I'm doing something wrong :( your help is appreciated!!!

<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--;
   })
  }
  });
 });

edit Here is an alternative version of the code according to the solution offered by 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

Try with something of very simple like this. Use inline events call

onclick="yourFunction()"

on appended div to make it smarter and with less code.

Create a variable for the new div like this

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>