jquery dynamic form, event on dynamic field

Question

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">
<h1>Add or Remove text boxes with jQuery</h1>
<div class="row">
    <div class="col-sm-6">
        <div class="my-form">
            <form role="form" method="post" action="">
                
                     
                <div class="form-group text-box">
                    <label for="box1">Question <span class="box-number">1</span></label>
                    <input type="text" name="boxes[]" value="" id="box1" />
                    <!--<p class="preview"></p>-->
                    <p class="answer">Answer with <a href="#" class="ansRadio">Radio</a> </p>

                    <a class="add-box" href="#">Add More</a>
                </div>
                <br/>
                <div class="form-group"><input type="submit" value="Submit" /></div>
            </form>
        </div>
    </div>
    <div class="col-sm-6">
         <p class="preview"></p>
    </div>
</div>

javascript

jQuery(document).ready(function($){

$('#box1').keyup(function () {
     var impt = '<strong>1. </strong>'+ $(this).val();
     $(".preview").html(impt);
});
 $('#radio1').keyup(function () {
    alert("radio1");
     var impt = '<strong>Please choose</strong>'+ $(this).val();
      appendTo(".preview").append(impt);
     //$(".preview").append(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');
    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;
});

});

There seems to be an issue getting the

$('#radio1').keyup(function ()

to work.

Here is the jsfiddle

As you can see the 'remove option' link works but the type in the option box doesn't trigger the keyup function.

Any help much appreciated.

keja · Accepted Answer · 2015-08-21 16:17:50Z

1

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

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

answered Aug 21, 2015 at 16:17

keja

1,3631 gold badge15 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

martyn Over a year ago

Thanks. I appreciate your swift response.

J Santosh · Accepted Answer · 2017-07-05 12:30:47Z

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/

Collectives™ on Stack Overflow

jquery dynamic form, event on dynamic field

2 Answers 2

1 Comment

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Linked

Related