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

Posted 2023-05-09

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

【英文标题】：I want to add same text field by clicking + button but problem is only first + button is working other + button is not working? help needed

【发布时间】：2021-07-29 03:23:00

【问题描述】：

我已经使用 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>
  

【问题讨论】：

还有什么+按钮？每次添加一组新元素时，按钮上只有一个带有 X 的“删除”选项。

请查看此图片：i.stack.imgur.com/ipbf0.png 其他 + 按钮表示附件 2 旁边的按钮和附件 1 旁边的仅附件 3 按钮正在工作

【参考方案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>

【讨论】：

感谢妈妈花时间解决我的问题！我仍然遇到一个问题。单击（+）按钮后，没有添加新行。

您是否将class="append" 添加到您的按钮？

请查看链接jsfiddle

是的，妈妈，我在按钮字段中添加了 class="append"

Updated code 以及您的脚本。