Question

所以我有这个基本的bootstrap表单，我有一个名为添加另一个位置的按钮，它将动态创建另外4个输入以添加更多位置。这是通过jquery和jquery UI实现的。所以我制作了这个表格的3份副本并将它们放在一个列表中，因为最终，它们将来自服务器并且循环表单取决于可用的许多信息集。我遇到的问题是，只有我的第一个添加另一个位置按钮才有效，并且它在第二个和第三个按钮上创建了额外的输入。我可以为新表单的按钮提供不同的id / class，但这对我没有任何好处，因为可以通过服务器显示更多或更少的表单。我的问题是每个按钮如何独立行动而不给它不同的id / class。因此，如果我在第二组表单上单击添加另一个位置按钮，它只会在第二组或第三组上创建其他输入，第一组和第三组相同。

这是克隆并附加新输入的jquery代码

    $("#pm-do-clone1").click(function () {

    $(".pm-clone-this3 .pm-clone4").clone().appendTo(".pm-clone-here1");
});

这里是我的jsfiddle ：https://jsfiddle.net/jaisilchacko/yqvd4Lvv/4/ ps：小提琴第一个添加位置不是创建新输入，但它适用于我的本地。可能是外部资源问题

Answer 1

好吧，正如我所理解的那样你必须通过重新点击它来抓住点击的按钮;

 $("#pm-do-clone1").click(function () {
 $(this).//rest of the code

在我们捕获点击的代码的其余代码中，我们现在必须找到它的父级，我们将添加新的输入。例如，

var y = document.createElement('input');
var x =$(this).parents('.form');
$(x).append(y);

编辑：顺便说一下，你点击了一个ID，ID不是从多个elemets中捕获一个ID的最佳模型，因为它有时会出错，而是使用class。

Edit2：也请检查此代码段。我相信这会对你有所帮助。的 View DEMO

编辑3：为什么要将每个输入包装到div中？似乎没有必要不创建太多的元素，因为只有输入才能获得相同的结果。

JQuery，通过按钮创建表单输入而不使用表单列表

1 个答案: