我已经开始使用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 ()
工作。
正如您可以看到&#39;删除选项&#39;链接有效,但选项框中的类型不会触发键盘功能。
任何帮助都非常感激。
答案 0 :(得分:1)
当元素不在DOM中时,你绑定了keyup事件,请尝试这样做:
$('.my-form').on("keyup", "#radio1", function () {
答案 1 :(得分:0)
在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;
});