jquery动态表单，动态字段上的事件 [英] jquery dynamic form, event on dynamic field

问题描述

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

  div class =container> 
< h1>使用jQuery添加或删除文本框< / h1> 
< div class =row> 
< div class =col-sm-6> 
< div class =my-form> 
< form role =formmethod =postaction => 
 
 
< div class =form-group text-box> 
< label for =box1>问题< span class =box-number> 1< / span>< / label> 
< input type =textname =boxes []value =id =box1/> 
<！ - < p class =preview>< / p>  - > 
< p class =answer>回答< a href =＃class =ansRadio>无线电< / a> < / p为H. 
 
< a class =add-boxhref =＃>添加更多< / a> 
< / div> 
< br /> 
< div class =form-group>< input type =submitvalue =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>请选择< ; / strong>'+ $（this）.val（）; 
 appendTo（。preview）。append（impt）; 
 //$(\".preview\").append(impt） ; 
}）; 
 
 
 $（'。my-form .ansRadio'）。click（function（）{//当收音机答案被点击时显示收音机答案选项
 var n = $（'。text-box'）。length; 
 var box_html = $（'< div class =radio-box>< label for =box'+ n +'>选项< span class =box-number>'+ n +'< / span>< / label>< input type =textname =answer'+ n +' []value =id =radio1/>< a href =＃class =remove-option> rem ove选项< / a>< / div>'）; 
 box_html.hide（）; 
 $（'。answer'）。hide（）; 
 $（'。my-form div.text-box：last'）。after（box_html）; 
 box_html.fadeIn（'slow'）; 
返回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）; 
}）; 
 $（'。答案'）。show（）; 
}）; 
 return false; 
}）; 
  

}）;

（b）
$ b

  $（'＃radio1'）。keyup（function（）
  
 
 
 
去工作。 net / xu9g1t0n /rel =nofollow>这是jsfiddle  
 
 
 
正如你所看到的'删除选项'链接的作品，但在选项框不会触发keyup功能。
 
 
 
非常感谢任何帮助。
解决方案
 div> 
当元素不在DOM中时，你绑定了keyup事件，试试这个： 
 
 
  $（'。my （'keyup'，＃radio1，function（）{ 
 
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.
解决方案
you are binding the keyup event when the element is not in the DOM, try this instead:

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

                        
这篇关于jquery动态表单，动态字段上的事件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！