Question

我正在处理多选形式，用户可以在其中添加问题的输入字段，表示如果问题是答案，则用户可以通过单击按钮添加另一个输入字段。同样聪明：

$(document).ready(function() {
    var max_fields      = 5; //maximum input boxes allowed
    var wrapper         = $(".addChoices"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="form-group"><label class="col-md-3 control-label" for="duration">Answer</label><div class="col-md-6"><input id="duration" name="answer[]" type="password" placeholder="Answer" class="input input-md"> <input type="checkbox" name="correct"> Correct </div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

这是有效的，但我也希望用户可以添加另外一个问题，我已经编写了以下代码。

$(document).ready(function() {
    var max_fields      = 5; //maximum input boxes allowed
    var wrapper         = $(".questions"); //Fields wrapper
    var add_button      = $(".add_question_button"); //Add button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="component addChoices"><!-- Password input--><div class="form-group"><label class="col-md-3 control-label" for="duration">Question</label><div class="col-md-8"><input id="duration" name="duration" type="password" placeholder="Question" class="input input-md"></div></div><div class="form-group"><label class="col-md-3 control-label" for="duration">Answer</label><div class="col-md-6"><input id="duration" name="answer[]" type="password" placeholder="Answer" class="input input-md"><input type="checkbox" name="correct"> Correct &nbsp;&nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div></div></div><div class="form-group"><label class="col-md-3 control-label" for="duration"></label><div class="col-md-6"><button class="add_field_button">Add Choices</button></div></div>'); //add input box
        }
    });

    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

现在的问题是，第一个代码有一个按钮add_field_button，然后再添加问题添加部分。一页有两个同名的按钮，由Jquery使用。

应该消除冲突。

Answer 1

他们有哪个名字？无论如何，你可以给第一个按钮提供初始ID，比如id="btn1"，而不是为新按钮生成不同的id - s，基于＆＃34;文本框计数＆＃34;值，也隐藏上一个按钮就像这里：

$(document).ready( function(){
  x=1;  //initlal text box count
});

$(".add_question_button").click(function(e) {
    e.preventDefault();
    addform();    
});

$(".questions").on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    });

function addform(e){ //on add input button click
    var max_fields      = 5; //maximum input boxes allowed
    var wrapper         = $(".questions"); //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="component addChoices">
<!-- Password input--><div class="form-group"><label class="col-md-3 control-label" for="duration">Question</label>
<div class="col-md-8"><input id="duration" name="duration" type="password" placeholder="Question" class="input input-md"></div></div>
<div class="form-group"><label class="col-md-3 control-label" for="duration">Answer</label>
<div class="col-md-6"><input id="duration" name="answer[]" type="password" placeholder="Answer" class="input input-md"><input type="checkbox" name="correct"> Correct &nbsp;&nbsp;&nbsp;<span style="color: blue">Delete Choice</span></div></div></div>
<div class="form-group"><label class="col-md-3 control-label" for="duration"></label>
<div class="col-md-6">
<button id="btn'+x+'" class="add_question_button" onclick="javascript:addform()">Add Choices</button></div></div>'); //add input box

  $("#btn"+(x-1)).hide();
        }
    }

使用append（）生成html时Jquery生成HTML按钮冲突

1 个答案: