使用jquery克隆元素会产生不需要的多个副本

Question

在我目前的项目中，我有这个jquery函数：

$(document).on("click", "button.multiple", function(){
    $(this).parent().first().find("input.multiple").after( $(this).parent().first().find("input.multiple").clone() );
});

每次单击一个按钮时，都应该向页面添加这样的新输入元素：

<div>
    <label>Fotos</label>
    <input type="file" class="form-control multiple" name="fotos" />
    <button type="button" class="btn btn-default multiple">
        <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>novo
    </button>
</div>

但是当我点击按钮时，会生成此元素的多个副本。谁能说出这里有什么问题？

Answer 1

关注上述评论中的消息，我使用以下代码解决了这个问题：

$(document).on("click", "button.multiple", function(){
    $(this).parent().first().find("input.multiple").first().after(
        $(this).parent().first().find("input.multiple").first().clone()
    );
});