javascript - 添加从表单动态生成的字段

Question

大家好，我想在按下按钮时动态添加一组输入字段。这适用于 1 组，但不适用于多于一组。这是我的 HTML:

<form action="address.php" method="POST">
    <div id="list">
    <input type="text" name="address" placeholder="Address">
    <input type="text" name="suburb" placeholder="Suburb">
    <input type="text" name="state" placeholder="State">
    <input type="text" name="country" placeholder="Country">
    <button id="addMore">Add Address</button>
    </div>
</form>

我正在使用以下 javascript 调用 addMore 函数:

$(function(){
               $("#addMore").click(function(e){
                  e.preventDefault();
                   $("#list").append("<input type="text" name="address" placeholder="Address"><input type="text" name="suburb" placeholder="Suburb"><input type="text" name="state" placeholder="State"><input type="text" name="country" placeholder="Country"><button id="addMore2">Add Address</button></div>");
               });
            });

我在末尾添加了一个 id 为 addMore2 的按钮，因为我想生成一组类似的输入控件，但名称不同。我想用这个函数调用该 id:

$(function(){
               $("#addMore2").click(function(e){
                  e.preventDefault();
                   $("#list").append("<input type="text" name="address2" placeholder="Address"><input type="text" name="suburb2" placeholder="Suburb"><input type="text" name="state2" placeholder="State"><input type="text" name="country2" placeholder="Country"><button id="addMore3">Add Address</button></div>");
               });
            });

...然后是另一组具有 addMore3 函数的控件。与上面相同，但数字为 3。如果我单独使用每个功能，它就可以工作。但如果我尝试同时使用所有三个，它就不起作用。如何动态地重现一组具有不同名称的输入控件？

Answer 1

你可以做这样的事情

$(var count = 0;
           $("#addMore2").click(function(e){
              e.preventDefault();
               $("#list").append("<input type='text' name='address2'"+count+" placeholder="Address"><input type="text" name='suburb2'"+count+" placeholder="Suburb"><input type="text" name='state2'"+count+" placeholder="State"><input type="text" name='country2'"+count+" placeholder="Country"><button id='addMore3'"+count+">Add Address</button></div>");
           count++;
           });
        });