我想添加和/或删除输入字段和复选框(用于竞赛页面)成为可能
即使当我单击添加按钮时,也会添加2个输入字段,而当我单击删除按钮时,只有其中的一个消失。有什么问题
var InputsWrapper = $("#answerDiv");
var AddButton = $(".adaddnext");
var x = InputsWrapper.length;
var FieldCount=1;
$(AddButton).click(function (e) {
FieldCount++;
$(InputsWrapper).append('<div class="adinputfield83"><div class="checkaccept cacc1"><label class="option"><input type="radio" id="contestAnswersChk_'+ FieldCount +'" name="correct" class="validate[required]"><span class="checkbox"></span></label> </div><input type="text" id="contestAnswer_'+ FieldCount +'" placeholder="Write possible answer" class="validate[required]"/><span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true"></span></div></div>');
x++;
return false;
});
$("body").on("click",".adaddnextremove", function(e){
if( x > 1 ) {
$(this).parent('div').remove();
x--;
}
return false;
})
和HTML:
<div id="answerDiv">
<div class="adinputfield83">
<div class="checkaccept cacc1">
<label class="option">
<input type="radio" id="contestAnswerChk_1" name="correct" class="validate[required]">
<span class="checkbox"></span>
</label>
</div>
<input type="text" id="contestAnswer_1" placeholder="Write possible answer" class="validate[required]">
<span class="font-entypo icon-plus adaddnext" aria-hidden="true"></span>
</input>
</div>
</div>
有人可以帮我吗?谢谢...
最佳答案
JSFiddle:http://jsfiddle.net/TrueBlueAussie/R3TLB/2/
您需要为add
按钮和删除按钮委派事件。
var InputsWrapper = $("#answerDiv");
var x = InputsWrapper.length;
var FieldCount = 1;
$(document).on('click', '.adaddnext', function (e) {
FieldCount++;
var template = $('#template').html();
template = template.replace(/{FieldCount}/g, FieldCount);
$(InputsWrapper).append(template);
x++;
return false;
});
$(document).on("click", ".adaddnextremove", function (e) {
if (x > 1) {
$(this).parent('div').remove();
x--;
}
return false;
})
HTML(在虚拟脚本块中使用模板HTML):
<script id="template" type="text/template">
<div class="adinputfield83">
<div class="checkaccept cacc1">
<label class="option">
<input type="radio" id="contestAnswersChk_{FieldCount}" name="correct" class="validate[required]" /><span class="checkbox"></span>
</label>
</div>
<input type="text" id="contestAnswer_{FieldCount}" placeholder="Write possible answer" class="validate[required]" /><span class="font-entypo icon-circled-cross adaddnextremove" aria-hidden="true">Del</span>
<input type="button" class="adaddnext" value="Add" />
</div>
</script>
<div id="answerDiv">
<div class="adinputfield83">
<div class="checkaccept cacc1">
<label class="option">
<input type="radio" id="contestAnswerChk_1" name="correct" class="validate[required]" /> <span class="checkbox"></span>
</label>
</div>
<input type="text" id="contestAnswer_1" placeholder="Write possible answer" class="validate[required]"> <span class="font-entypo icon-plus adaddnext" aria-hidden="true"></span>
</input>
</div>
<input type="button" class="adaddnext" value="Add" />
</div>
笔记:
不要使用
$('body')
监听委托事件。对于某些事件(包括click
),它可能具有奇怪的副作用。如果您没有更接近的不变祖先,请使用$(document)
的后备替代方式。实际上,您应该使用$('#answerDiv').on('click'...
,因为它是最接近的静态祖先(效率更高,更具体)。关于javascript - 动态添加和删除复选框和输入字段,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/24264901/