javascript - 如何在单击另一个按钮 1 时添加一个按钮 2，在单击按钮 2 时添加按钮 3

Question

在下面的 jquery 文件中，当我单击添加按钮时，它创建了一个带有一个按钮的文本框，在我单击添加按钮后，它创建了另一个带有按钮的文本框......但是我想要的是当我点击第一个按钮时它添加第二个按钮然后我点击第二个按钮它添加第三个按钮.....但我知道该怎么做..

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

  $("#addButton").click(function() {
    if (counter > 10) {
      alert("Only 10 textboxes allow");
      return false;
    }

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

    newTextBoxDiv.after().html('<label>Textbox #' + counter + ' : </label>' +
      '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >' +
      ' <input type="button" value="Add Button"  id="addButton">');

    newTextBoxDiv.appendTo("#TextBoxesGroup");
    counter++;
  });

  $("#removeButton").click(function() {
    if (counter == 1) {
      alert("No more textbox to remove");
      return false;
    }

    counter--;
    $("#TextBoxDiv" + counter).remove();
  });    
});

Answer 1

• 重复的 ID 是无效的 HTML，几乎总是会导致脚本问题。尽可能避免。
• 您正在使用的 click() 绑定(bind)称为“直接”绑定(bind)，它只会将处理程序附加到已经存在的元素上。它不会绑定(bind)到将来创建的元素。为此，您必须使用 on() 创建一个“委托(delegate)”绑定(bind)。更多详情:http://api.jquery.com/on/

您的样本:

$(document).ready(function(){

    var counter = 2;

		$(document.body).on('click', ".addButton", function(){

    if(counter>10){
            alert("Only 10 textboxes allow");
            return false;
    }

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

    newTextBoxDiv.after().html('<label>Textbox #'+ counter + ' : </label>' +
          '<input type="text" name="textbox' + counter + '" id="textbox' + counter + '" value="" >' + 
          ' <input type="button" value="Add Button" class="addButton" id="button' + counter + '">');

    newTextBoxDiv.appendTo("#TextBoxesGroup");
    $(this).attr( "disabled", "disabled" );

    counter++;
     });

     $(".removeButton").click(function () {
    if(counter==1){
          alert("No more textbox to remove");
          return false;
     }

    counter--;

        $("#TextBoxDiv" + counter).remove();
        $("#button" + (counter - 1)).attr( "disabled", false );
        if(counter==2){
             $(".addButton").attr( "disabled", false ); 
         }

     });

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
  <input class="addButton" type="button" value="Add Button" />
  <input class="removeButton" type="button" value="Remove Button" />
</div>
<div id="TextBoxesGroup"></div>