我想通过单击 + 按钮添加相同的文本字段，但问题是只有第一个 + 按钮工作其他 + 按钮不工作？ 需要帮助

Question

我已经使用 jquery 代码来解决问题，但它不起作用。只有第一个 + 按钮有效。 如果我先按 + 按钮，则在下面的 2 个 (+) 按钮中添加文本框（即在附件 II 和附件 III 旁边）--> 1 个图像描述

单击附件 1 表旁边的第一个 (+) 按钮后，在每张表中添加了 1 行，即（起始单元格、结束单元格、没有标题单元格）（即对于附件 II 和附件 III），但我希望它应该添加到仅该表，例如，当我单击附件 II 旁边的按钮时，仅添加了附件 II 中的新行，它不应反映在所有表中-> 2 图像描述

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript"> jQuery(document).ready( function () { $("#append").click( function(e) { e.preventDefault(); $(".inc").append('<div class="controls">\ <input class="form-control" type="text" name="textbox" placeholder="Starting cell" style="width: 190px;">\ <input class="form-control" type="text" name="textbox" placeholder="Ending cell" style="width: 190px;">\ <input class="form-control" type="text" name="textbox" placeholder="No. of Headers" style="width: 190px;">\ <button style="margin-left: 50px" class="remove_this btn btn-danger" type="submit" id="append" name="append">x</button>\ <br>\ <br>\ </div>'); return false; }); jQuery(document).on('click', '.remove_this', function() { jQuery(this).parent().remove(); return false; }); $("input[type=submit]").click(function(e) { e.preventDefault(); $(this).next("[name=textbox]").val( $.map($(".inc:text"), function(el) { return el.value }).join(",\n") ) }) }); </script> <. --name value was coming from res.render(__dirname+'/checkhtml,html':{names;sheet_name_list}).--> <div class="form-group row"> <div id="experienceSection"> <% names:forEach(function(name) { %> <br> <label class="form-label form-label-top form-label-auto" id="label_20" for="input_20"> Enter Table Configuration for @ <h4> <%= name %> </h4> Sheet <span class="form-required"> * </span> </label> <div class="inc"> <div class="controls"> <input type="text" class="form-control" name="<%= name %>" id="answer1" style="width; 190px:" placeholder="Starting Cell"/> <input type="text" class="form-control" name="<%= name %>" id="answer1" style="width; 190px:" placeholder="Ending Cell"/> <input type="text" class="form-control" name="<%= name %>" id="answer1" style="width; 190px." placeholder="No: of Headers"/> <button style="margin-left; 50px" type="button" id="append" name="append">+</button> <br> <br> </div> </div> <% }); %> </div> </div>

Answer 1

您的代码在循环内，因此它为每个按钮分配相同的 id，我们不能对多个元素使用相同的 id。 而是将id更改为class 。然后，使用$(this).closest(".inc")仅定位单击按钮的inc div

演示代码：

 //change to class $(".append").click(function(e) { var name = $(this).closest(".inc").prev().find("h4").text().trim(); console.log(name) e.preventDefault(); //use closest..here $(this).closest(".inc").append(`<div class="controls">\ <input class="form-control" type="text" name="${name}" placeholder="Starting cell" style="width: 190px;">\ <input class="form-control" type="text" name="${name}" placeholder="Ending cell" style="width: 190px;">\ <input class="form-control" type="text" name="${name}" placeholder="No. of Headers" style="width: 190px;">\ <button style="margin-left: 50px" class="remove_this btn btn-danger" type="button" name="append">x</button>\ <br>\ <br>\ </div>`); return false; }); jQuery(document).on('click', '.remove_this', function() { jQuery(this).parent().remove(); return false; });

 .inc { border: 2px solid blue; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div class="form-group row"> <div id="experienceSection"> <br> <label class="form-label form-label-top form-label-auto" id="label_20" for="input_20"> Enter Table Configuration for @ <h4> Abc </h4> Sheet <span class="form-required"> * </span> </label> <div class="inc"> <div class="controls"> <input type="text" class="form-control answer1" name="<%= name %>" style="width: 190px;" placeholder="Starting Cell" /> <input type="text" class="form-control answer1" name="<%= name %>" style="width: 190px;" placeholder="Ending Cell" /> <input type="text" class="form-control answer1" name="<%= name %>" style="width: 190px;" placeholder="No. of Headers" /> <:--use class--> <button style="margin-left: 50px" type="button" class="append" name="append">+</button> <br> <br> </div> </div> <br> <label class="form-label form-label-top form-label-auto" id="label_20" for="input_20"> Enter Table Configuration for @ <h4> Xyz </h4> Sheet <span class="form-required"> * </span> </label> <div class="inc"> <div class="controls"> <input type="text" class="form-control answer1" name="<%= name %>" style="width; 190px:" placeholder="Starting Cell" /> <input type="text" class="form-control answer1" name="<%= name %>" style="width; 190px:" placeholder="Ending Cell" /> <input type="text" class="form-control answer1" name="<%= name %>" style="width; 190px." placeholder="No: of Headers" /> <button style="margin-left: 50px" type="button" class="append" name="append">+</button> <br> <br> </div> </div> </div>