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

问题描述：

在下面的jquery文件中，当我点击添加按钮时，它创建一个文本框与一个按钮后，我单击addbutton它创建另一个文本框与按钮.... ......但是，我想要的是，当我cllick第一按钮将其添加第二个按钮，然后我点击第二按钮将其添加第三个按钮.....但我doknow怎么办..如何添加一个buttton2，同时点击另一个按钮1和按钮3，同时点击按钮2

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

标识是HTML是唯一的。你使用addButton和addtextbox id在你的情况下多次添加。这就是您的代码无法按预期工作的原因。 –

哦谢谢..但我怎么得到这个没有使用id .. – Karthiga

使用常见的类和绑定点击类，并生成文本框和按钮。它会起作用。 –

答

重复的ID无效HTML和几乎总是引起脚本问题。尽可能避免。
您使用的click（）绑定称为“直接”绑定，它只会将处理程序附加到已存在的元素。它不会被绑定到未来创建的元素上。要做到这一点，你必须使用on（）创建一个“委托”绑定。更多细节：http://api.jquery.com/on/

您的样本：

$(document).ready(function(){ 
 

 
    var counter = 2; 
 

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

感谢您的帮助...它工作正常 – Karthiga

我想要删除按钮也相同functionallity .. – Karthiga

删除按钮已经在我的代码段中工作。你想在添加按钮旁边的每个创建的组上添加删除按钮吗？请在https://jsfiddle.net/上分享您的代码，以便您更好地理解它。 –

答

您可能试试这个：

此行$(obj).attr("disabled", "disabled");到禁用clicke d按钮。你可以跳过。

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>

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

相关推荐