为什么 jQuery 追加方法在传递父类以添加子输入时不起作用？

Question

我想在父框中附加输入框的重复。这是我的HTML结构：

<div class="reading-group input-group">
    <input type="text" placeholder="Enter Reading link" id="link">         
</div>
<a href="javascript:void(0)" class="add-reading-btn add-resource">+ Add another link</a>

这是我的jQuery代码：

function addPlaceholder(parentClass){
  var placeHolder = $(parentClass).children().eq(0);
  $(parentClass).append(placeHolder);
  console.log(placeHolder);
}
$('.add-reading-btn').click(function(){
  addPlaceholder('.reading-group');
});

这是jsfiddle链接：https：//jsfiddle.net/abhishekraj007/kexe6gxn/

我在做什么错？

Answer 1

您的代码正在将现有的<input>元素从<div>移动并回到<div>，因此看起来什么都没发生。如果您 .clone()元素，然后 .append()，将添加一个新元素。

这是一个有效的示例：

function addPlaceholder(parentClass) {
  var placeHolder = $(parentClass).children().eq(0).clone();
  $(parentClass).append(placeHolder);
  console.log(placeHolder);
}
$('.add-reading-btn').click(function() {
  addPlaceholder('.reading-group');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reading-group input-group">
  <input type="text" placeholder="Enter Reading link" id="link">
</div>
<a href="javascript:void(0)" class="add-reading-btn add-resource">+ Add another link</a>

如果要在加载时将焦点添加到<input>元素中，则可以通过将此行添加到代码底部来做到这一点：

$('#link').focus();

如果要将焦点添加到创建的新元素中，并给出一个空值而不是复制先验元素的值，请将此行添加到addPlaceholder()函数的末尾：

$(placeHolder).val("").focus();

Answer 2

您只需添加jQuery的.clone()方法即可创建文本框的克隆，如下所示。您只是指的是同一元素，而不是克隆的HTML。

$(document).ready(function(){
function addPlaceholder(parentClass){
    var placeHolder = $(parentClass).children().eq(0).clone();
    $(parentClass).append(placeHolder);
    //console.log(placeHolder);
  }
  
  $('.add-reading-btn').click(function(){
    addPlaceholder('.reading-group');
  });
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="reading-group input-group">
    <input type="text" placeholder="Enter Reading link" id="link">         
</div>
<a href="javascript:void(0)" class="add-reading-btn add-resource">+ Add another link</a>

这是一个工作小提琴

https://jsfiddle.net/kexe6gxn/2/