我想添加和/或删除输入字段和复选框(用于竞赛页面)成为可能

即使当我单击添加按钮时,也会添加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/

10-12 12:38
查看更多