javascript - Jquery生成html与append()按钮冲突

Question

我有一个场景:

Example Code | JSFiddle

我正在构建一个问卷应用程序，我对一个问卷有很多问题。

在添加问题页面，我默认有一个问题，可以通过jquery生成其他问题。

现在每个问题下方都有一个名为“添加答案”的按钮为单个问题创建最多 4 个答案。

在同一页面上，我有一个用于添加另一个问题的按钮

所以我确实成功地为第一个问题生成了答案(文本字段)。

$(document).ready(function() {
    var max_fields      = 3; 
    var wrapper         = $(".addChoices"); 
    var add_button      = $("#add_field_button");
    $(add_button).click(function(e){ 
        e.preventDefault();
        if(x < max_fields){ 
            x++; 
            $(wrapper).append('<div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Answer</label><div class="col-md-8"><input type="text" name="" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="checkbox" name="correct"> Correct</span>&nbsp;|&nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div>'); 
        }
    }); 
    $(wrapper).on("click",".remove_field", function(e){ 
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

对于问题生成，我有通过jquery append()生成问题的代码:

function addform(e){ //on add input button click
    var max_fields      = 5; //maximum input boxes allowed
    var wrapper         = $(".add-question-wrapper"); //Fields wrapper
    var add_button      = $(".add_question_button"); //Add button ID

        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="row"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question Type</label>  <div class="col-md-8"><select class="form-control"><option>Text</option><option>MCQs</option></select></div></div></div></div><div class="row addChoices"><div class="col-md-8"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Question</label><div class="col-md-8"><input type="text" name="" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="checkbox" name="correct"> Correct</span>&nbsp;| &nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div></div><div id="add-choice"><button type="button" class="btn btn-primary btn-sm" id="add_field_button">Add Choice</button></div>');
        }
    }

问题:

当我生成一个新问题时，用于为生成问题的 html 按钮中的每个问题生成答案的按钮的 id 与默认问题按钮的 id 相同。

理解它:

带有默认问题的按钮 ID 现在等于生成的问题按钮 ID 相同。

现在生成的问题添加答案按钮不起作用，默认问题按钮也不起作用。

问题:按钮 ID 冲突。

Answer 1

所以我可以看到一些问题。

1. 您需要使用类名而不是 ID add_field_button。

2. 您需要一些x 和y。跟踪问题总数和答案总数的方式不同。您应该计算出现的元素数量，而不是 x，因为选择数量 应基于每个问题。

3. 包装器应该是最接近的.addChoices

   $(document).on("click", ".add_field_button", function(e) {
   var wrapper = $(this).closest("div").prev(".addChoices");
   var _num_choices =  $(this).closest("div").prev(".addChoices").find(".singletonChoiceContainer").length;
   
   if (_num_choices < max_fields) {
     x++;
       wrapper.append('<div class="col-md-8 singletonChoiceContainer"><div class="form-group"><label class="col-md-4 control-label" for="textinput">Answer</label><div class="col-md-8"><input type="text" name="" class="form-control"></div></div></div><div class="col-md-4 operations"><span><input type="checkbox" name="correct"> Correct</span>&nbsp;|&nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div>');
   }
   });
   

这是更新后的fiddle