Jquery Dynamic Form, Event On Dynamic Field

I have started to create a dynamic form using jquery to create each question at a time but there seems to be an issue with an event on the dynamic content. div class='container'>

Solution 1:

you are binding the keyup event when the element is not in the DOM, try this instead:

$('.my-form').on("keyup", "#radio1", function () {

Solution 2:

In jQuery if you are adding any element to DOM DYNAMICALLY, then to attach an event to that element you must write or call code for attaching event immediatly after appending it to DOM .

Updated Code

jQuery(document).ready(function($){
$('#box1').keyup(function () {
 var impt = '<strong>1. </strong>'+ $(this).val();
 $(".preview").html(impt);
});

$('.my-form .ansRadio').click(function(){//when radio answer is clicked     show the radio answer options
var n = $('.text-box').length;
var box_html = $('<div class="radio-box"><label for="box' + n + '">Option <span class="box-number">' + n + '</span></label> <input type="text" name="answer'+n+'[]" value="" id="radio1" /><a href="#" class="remove-option">remove option</a></div>');
box_html.hide();
$('.answer').hide();
$('.my-form div.text-box:last').after(box_html);
box_html.fadeIn('slow');
$('#radio1').keyup(function () {
alert("radio1");
 var impt = '<strong>Please choose</strong>'+ $(this).val();
  appendTo(".preview").append(impt);
 //$(".preview").append(impt);
});
return false;
});

$('.my-form').on('click', '.remove-option', function(){
$(this).parent().css( 'background-color', '#FF6C6C' );
$(this).parent().fadeOut("slow", function() {
    $(this).remove();
    $('.box-number').each(function(index){
        $(this).text( index + 1 );
    });
    $('.answer').show();
});
return false;
});

http://jsfiddle.net/santoshj/xu9g1t0n/2/