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

回答1:

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

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

回答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/