jQuery，在不同的div中执行相同操作的按钮

Question

我正在创建一个问卷创建者。我的问题是我只是无法弄清楚对不同的div实现类似代码的方式。对于第一个问题，一切正常。 “添加答案”按钮添加了一个答案，但是一旦我添加了新问题，类似的按钮就会停止工作。在评论中，您可以看到我的尝试。

感谢帮助

 $(document).ready(function(){    
    var quest=2;
    var counter=2;    
    		
    $("#addButton").click(function () {    				
      if(counter>10){
        alert("Only 10 answers allowed");
        return false;
      }   

      var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);

      newTextBoxDiv.after().html('<label>Answer #'+ counter + ' : </label>' +
            '<input type="text" name="textbox' + counter + 
            '" id="textbox' + counter + '" value="" >'
            );   
      newTextBoxDiv.appendTo("#TextBoxesGroup");
      $("html, body").animate({ scrollTop: $(document).height() }, "slow");
      counter++;
    });
    
    $("#removeButton").click(function () {
    	if(counter==2){
          alert("You have to have at least one possible answer available");
          return false;
       }         
    	counter--;    			
      $("#TextBoxDiv" + counter).remove();    			
    });        
    
    $("#btn1").click(function () {      		
    	var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + quest);
    	newTextBoxDiv.after().html(
    		'<br><label>Question #'+ quest + '</label>' +
    	      '<input type="text" name="quest' + quest + 
    	      '" id="quest' + quest + '" value="" placeholder="Insert the question">'+
    	      
    	      '<label>Description</label>'+
    	      '<textarea id="descr+"'+quest+' name="descr"'+quest+' "value="" placeholder="Insert clarifications if needed"></textarea> '+
    
    	      '<br><label>Select type of question</label>'+
    	      '<label><input type="radio" name="type'+quest+' " id="a'+quest+'" value="checkbox'+quest+'" <label for="a+'+quest+'"> Multiple choice</label> </label>'
    	      +'<label><input type="radio" name="type'+quest+' " id="b'+quest+'" value="radio'+quest+'" '+
    	      '<label for="b+'+quest+'"> One choice </label></label>'+
    	      '<label> <input type="radio" name="type'+quest+' " id="c'+quest+'" value="text'+quest+'" '+
    	      '<label for="c+'+quest+'"> Text</label></label>'+
    
    	      '<div id="TextBoxesGroup'+quest+'"> <div id="TextBoxDiv'+quest+'"> <label>Answer #1 : </label><input type="textbox" id="textbox'+quest+' " </div> </div><input type="button"  value="Add Answer'+quest+' " id="addButton'+quest+'" class="test"> <input type="button" value="Remove Answer'+quest+' " id="removeButton'+quest+' ">'      
    
      );
                
    	newTextBoxDiv.appendTo("#question");
      $("html, body").animate({ scrollTop: $(document).height() }, "slow");
    	quest++;
    });
    
    $("input[type='radio']#c").click(function(){
        $("#addButton").prop('disabled',true);
        for (var i =counter; i >= 2; i--) {
          $("#TextBoxDiv"+i).remove();
        }    	
    });
    
    $("input[type='radio']#a").click(function(){
    			$("#addButton").prop('disabled',false);
    		});
        
    $("input[type='radio']#b").click(function(){
    			$("#addButton").prop('disabled',false);
    		});
    });
    

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mom">
  <div class="header">
    <h2>Questionnaire Creator</h2>
  </div>

  <div class="nav">
    <p> Insert the questionnaire name here</p>
    <textarea id="info" name="info"></textarea>
  </div>

  <div id="question">
      <label for="name">Question #1<br></label><input type ="text" id="quest1" name="quest" placeholder="Insert the Question">
      <label for="descr">Description<br></label><textarea id="subject" name="subject" placeholder="Insert clarifications if needed"></textarea><br>
      <label for="type">Select type of the question<br></label>
      <input type="radio" name="type" value="checkbox" id="a"> 
      <label for="a">Multiple choice</label><br>
      <input type="radio" name="type" value="radio" id="b"> 
      <label for="b">One choice</label><br>
      <input type="radio" name="type" value="text" id="c"> 
      <label for="c">Text</label><br>

    <div id='TextBoxesGroup'>
      <div id="TextBoxDiv1">
        <label>Answer #1 : </label><input type='textbox' id='textbox1' >
      </div>
    </div>
  <br>
  <br>
  <input type='button' value='Add Answer' id='addButton' class="test">
  <input type='button' value='Remove Answer' id='removeButton' class="test">
  <br>
</div>
<button id="btn1">Add new question</button>
<button id="btn3" type="submit">submit</button>

Answer 1

似乎您正在初始化文档加载时的所有操作。这是正确的方法，但是不幸的是，这意味着任何新按钮都将无法执行正确的操作。我建议将附加在#addButton上的函数放入函数中。然后，您可以在创建时将onclick属性添加到新按钮中

function addButton() {}
$("#addButton").click(addbutton())
<input type="button" value="Add Answer3 " id="addButton3" class="test" onclick="addButton()">

最后，尽管您的总体结构似乎可以使用一些更新。例如，您应该使用某种分组方式将新的问题和答案分开，因为您是即时创建它们的。例如id就像“ q1-addButton3”。您还可以通过使用jquery模板使生活更轻松一些：

http://stephenwalther.com/archive/2010/11/30/an-introduction-to-jquery-templates

Answer 2

似乎您必须面对duplicate id问题。因此我通过.on方法创建了这些事件，该方法适用于lazy加载的dom元素。我在您的元素中添加了分类。仍然存在计数器问题，您正在使用一个全局计数器变量，该变量根据您当前的计数器值生成answer #，应该是问题的答案计数。

$(document).ready(function() {
  var quest = 2;
  var counter = 2;

  $(document).on("click", ".addButton", function() {
    let btn = $(this).attr('data-attr');
    if (counter > 10) {
      alert("Only 10 answers allowed");
      return false;
    }

    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + counter);

    newTextBoxDiv.html('<label class="label' + btn + counter + '">Answer #' + counter + ' : </label>' +
      '<input type="text" name="textbox' + counter +
      '" id="textbox' + counter + '" value="" >'
    );
    newTextBoxDiv.appendTo("#TextBoxesGroup"+btn);
    $("html, body").animate({
      scrollTop: $(document).height()
    }, "slow");
    counter++;
  });

  $("#removeButton").click(function() {
    if (counter == 2) {
      alert("You have to have at least one possible answer available");
      return false;
    }
    counter--;
    $("#TextBoxDiv" + counter).remove();
  });

  $("#btn1").click(function() {
    var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv' + quest);
    newTextBoxDiv.after().html(
      '<br><label>Question #' + quest + '</label>' +
      '<input type="text" name="quest' + quest +
      '" id="quest' + quest + '" value="" placeholder="Insert the question">' +

      '<label>Description</label>' +
      '<textarea id="descr+"' + quest + ' name="descr"' + quest + ' "value="" placeholder="Insert clarifications if needed"></textarea> ' +

      '<br><label>Select type of question</label>' +
      '<label><input type="radio" name="type' + quest + ' " id="a' + quest + '" value="checkbox' + quest + '" <label for="a+' + quest + '"> Multiple choice</label> </label>' +
      '<label><input type="radio" name="type' + quest + ' " id="b' + quest + '" value="radio' + quest + '" ' +
      '<label for="b+' + quest + '"> One choice </label></label>' +
      '<label> <input type="radio" name="type' + quest + ' " id="c' + quest + '" value="text' + quest + '" ' +
      '<label for="c+' + quest + '"> Text</label></label>' +

      '<div id="TextBoxesGroup' + quest + '"> <div id="TextBoxDiv' + quest + '"> <label class="label' + quest + ' ">Answer #1 : </label><input type="textbox" id="textbox' + quest + ' " </div></div><br><br><input type="button"  value="Add Answer' + quest + ' " id="addButton' + quest + '" data-attr="' + quest + '" class="test addButton"> <input type="button" value="Remove Answer' + quest + ' " id="removeButton' + quest + ' ">'

    );

    newTextBoxDiv.appendTo("#question");
    $("html, body").animate({
      scrollTop: $(document).height()
    }, "slow");
    quest++;
  });

  $("input[type='radio']#c").click(function() {
    $("#addButton").prop('disabled', true);
    for (var i = counter; i >= 2; i--) {
      $("#TextBoxDiv" + i).remove();
    }
  });

  $("input[type='radio']#a").click(function() {
    $("#addButton").prop('disabled', false);
  });

  $("input[type='radio']#b").click(function() {
    $("#addButton").prop('disabled', false);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="mom">
  <div class="header">
    <h2>Questionnaire Creator</h2>
  </div>

  <div class="nav">
    <p> Insert the questionnaire name here</p>
    <textarea id="info" name="info"></textarea>
  </div>

  <div id="question">
    <label for="name">Question #1<br></label><input type="text" id="quest1" name="quest" placeholder="Insert the Question">
    <label for="descr">Description<br></label><textarea id="subject" name="subject" placeholder="Insert clarifications if needed"></textarea><br>
    <label for="type">Select type of the question<br></label>
    <input type="radio" name="type" value="checkbox" id="a">
    <label for="a">Multiple choice</label><br>
    <input type="radio" name="type" value="radio" id="b">
    <label for="b">One choice</label><br>
    <input type="radio" name="type" value="text" id="c">
    <label for="c">Text</label><br>

    <div id='TextBoxesGroup1'>
      <div id="TextBoxDiv1">
        <label>Answer #1 : </label class="label1"><input type='textbox' id='textbox1'>
      </div>
    </div>
    <br>
    <br>
    <input type='button' value='Add Answer' data-attr="1" id='addButton' class="test addButton">
    <input type='button' value='Remove Answer' id='removeButton' class="test">
    <br>
  </div>
  <button id="btn1">Add new question</button>
  <button id="btn3" type="submit">submit</button>