Question

我已经开始使用jquery创建一个动态表单，一次创建每个问题，但动态内容上的事件似乎存在问题。

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

}）;

似乎有问题

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

工作。

Here is the jsfiddle

正如您可以看到＆＃39;删除选项＆＃39;链接有效，但选项框中的类型不会触发键盘功能。

任何帮助都非常感激。

Answer 1

当元素不在DOM中时，你绑定了keyup事件，请尝试这样做：

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

Answer 2

在jQuery中，如果要向DOM添加任何元素，那么要将事件附加到该元素，您必须在将事件附加到DOM后立即编写或调用代码以立即附加事件。

更新代码

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/

jquery动态表单，动态字段上的事件

2 个答案: