javascript - 当我们使用 jQuery 使用 .clone() 创建元素的副本时，如何保留占位符文本？

Question

我正在寻找如何在添加新行时将数据保留在占位符中。事实上，当添加新行时，它会复制前一行的数据。但我想检索占位符值而不是用户输入的数据。有什么想法吗？

这是脚本:

$('#add_address').click(function(event) {
  var lastDiv = $('#address > div').last();
  var id = parseInt(lastDiv.attr("id")) + 1;
  (lastDiv.clone(true).attr("placeholder", name)).insertAfter(lastDiv).find(".removeclass").show();
  return false;
});

$('body').on('click', '.removeclass', function(event) {
  $(this).parent().remove();
  return false;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="test5.php" method="post">
  <div style="margin-bottom:5px;">
    <input id="first_name" name="first_name" type="text" placeholder="First name" />
    <input id="last_name" name="last_name" type="text" placeholder="Last name" />
  </div>
  <div id="address">
    <div id="1">
      <input id="mail" name="mail[]" type="text" placeholder="mail" />
      <input id="type" name="type[]" type="text" placeholder="type" />
      <input id="comment" name="comment[]" type="text" placeholder="comment" />
      <a href="#" class="removeclass" style="display:none;">&times;</a>
    </div>
  </div>

  <input id="add_address" type="button" value="Ajouter" />
  <input type="submit" value="Create PDF" />
</form>

Answer 1

编辑
请注意，该答案的底部已被弃用。我意识到OP的大部分代码都是正确的，并且做了一个太大的解决方法，我已经在下面直接纠正了。

要使您的代码按预期工作，只需将其替换为以下内容即可。我所做的是将 .attr(placeholder) 替换为 .attr(id) 并添加一行以删除新(克隆)元素的值。

$('#add_address').click(function(event) {
  var lastDiv = $('#address > div').last();
  var id = parseInt(lastDiv.attr("id")) + 1;
  (lastDiv.clone(true).attr("id", id)).insertAfter(lastDiv).find(".removeclass").show();
 $("#address div:last-of-type input").val("");
  return false;
});

$('body').on('click', '.removeclass', function(event) {
  $(this).parent().remove();
  return false;
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="test5.php" method="post">
  <div style="margin-bottom:5px;">
    <input id="first_name" name="first_name" type="text" placeholder="First name" />
    <input id="last_name" name="last_name" type="text" placeholder="Last name" />
  </div>
  <div id="address">
    <div id="1">
      <input id="mail" name="mail[]" type="text" placeholder="mail" />
      <input id="type" name="type[]" type="text" placeholder="type" />
      <input id="comment" name="comment[]" type="text" placeholder="comment" />
      <a href="#" class="removeclass" style="display:none;">&times;</a>
    </div>
  </div>

  <input id="add_address" type="button" value="Ajouter" />
  <input type="submit" value="Create PDF" />
</form>

<小时/>

下面的旧答案(不必要)

这里有一个可能的解决方案:我重做了“ID”变量，以便每次点击后继 div 的 id 都会增加 1(对于 2 号 div，1+1 = 2)。

此外，我只是根据您的代码克隆该元素，然后将该值重置为空。希望这是您想要的。

 $('#add_address').click(function(event) {
        var lastDiv = $('#address div:last-of-type');
        var id = parseInt(lastDiv.attr("id"), 10)+1;
        (lastDiv.clone(true).attr("id", id)).insertAfter(lastDiv).find(".removeclass").show();
        $("#address div:last-of-type input").val("");
        return false;
    });

    $('body').on('click', '.removeclass', function(event) {
        $(this).parent().remove();
        return false;
    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="test5.php" method="post">
    <div style ="margin-bottom:5px;">
      <input id="first_name" name="first_name" type="text" placeholder="First name" />
      <input id="last_name" name="last_name" type="text" placeholder="Last name" />
    </div>
    <div id="address">
        <div id="1" >
            <input id="mail" name="mail[]" type="text" placeholder="mail" />
            <input id="type" name ="type[]" type="text" placeholder="type"/>
            <input id="comment" name="comment[]"  type="text" placeholder="comment" />
            <a href="#" class="removeclass" style="display:none;">&times;</a>
        </div>
    </div>

    <input id="add_address" type="button" value="Add address" />
    <input type="submit" value="Create PDF" />
    </form>