Question

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

$(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

您可以尝试：

这一行$(obj).attr( "disabled", "disabled" );来禁用单击按钮。你可以跳过。

function createButton(obj){
  var $input = $('<input type="button" value="Add Button"  onclick="createButton(this);">');
  $input.appendTo($("#buttons"));
  $(obj).attr( "disabled", "disabled" ); // use it to disable clicked btn
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="buttons">
  <input type="button" value="Add Button"  onclick="createButton(this);">
</div>

Answer 2

重复的ID是无效的HTML，几乎总是会导致脚本问题。尽可能避免。
您正在使用的click（）绑定称为＆＃34; direct＆＃34;绑定只会将处理程序附加到已存在的元素。它不会受到未来创建的元素的约束。要做到这一点，你必须创建一个＆＃34;委托＆＃34;使用on（）进行绑定。更多详情：http://api.jquery.com/on/

您的样本

＆＃13;

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

＆＃13;

<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>

＆＃13;

如何添加一个buttton2，同时单击另一个按钮1和按钮3，同时单击按钮2

2 个答案: