动态添加和删除复选框和输入字段

Question

我希望能够添加和/或删除输入字段和复选框（用于竞赛页面）

即使我点击添加按钮，也会添加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>

有人可以帮帮我吗？感谢...

Answer 1

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'...，因为那是最接近的静态祖先（效率更高，更具体）。

Answer 2

您已将变量定义为选择器$(...)，因此您应仅使用var名称：AddButton.click()

代码看起来是：

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

或者您也可以将变量定义为字符串，例如：

var AddButton = ".adaddnext"

然后就可以像在代码中那样使用它了：

$(AddButton).click(...)

然后应该是这样的：

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