jQuery中clone()函数实现表单中增加和减少输入项

在jQuery中，`clone()`函数是一个非常实用的功能，它用于复制匹配元素集合中的所有元素，包括它们的子元素。在处理动态表单时，比如需要增加或减少输入项，`clone()`函数尤其有用。本文将深入讲解如何使用`clone()`函数来实现这个功能。 `clone()`函数的基本语法是 `$(selector).clone([withDataAndEvents], [deepWithDataAndEvents])`。这里的参数`withDataAndEvents`和`deepWithDataAndEvents`是可选的，用于决定是否复制元素的事件处理程序和数据。 1. `withDataAndEvents`（默认为`false`）：如果设置为`true`，则会复制元素上的数据和事件处理程序。这在需要保留元素原有的行为时非常重要。 2. `deepWithDataAndEvents`（默认为`withDataAndEvents`的值）：如果设置为`true`，则会进行深度遍历，复制所有后代元素的数据和事件处理程序。 在描述的实例中，当点击"+"按钮时，使用`clone()`函数复制包含省份和招生人数的表单组，并在原有元素前插入。代码如下： ```javascript $(function(){ // 增加省份、招生人数 $(".addbtn").click(function(){ var copy_str = $(this).parents(".form-group").clone(true); copy_str.find("i").removeClass("fa-plus").addClass("fa-minus"); copy_str.find("button").removeClass("addbtn"); copy_str.find("button").attr("onclick","canelf(this)"); $(this).parent().parent().parent().before(copy_str); }); }); // 删除项 function canelf(e){ $(e).parent().parent().parent().remove(); } ``` 在这个例子中，`clone(true)`被用来确保新复制的元素仍然可以响应点击事件。`find("i")`和`find("button")`分别用于修改新元素的图标和删除按钮的行为。 HTML部分： ```html <div class="form-group"> <label class="control-label col-md-2 col-sm-3 col-xs-3">省份</label> <!-- ... 省略其他代码 ... --> <div class="col-md-2 col-sm-3 col-xs-3 " style="padding-left:0;"> <select class="form-control input-sm"> <!-- ... 省略选项 ... --> </select> </div> <div class="col-md-1 col-sm-1 col-xs-1"> <i class="fa fa-plus"></i> <button class="addbtn">+</button> </div> </div> ``` 总结起来，`jQuery.clone()`函数是动态创建和操作表单输入项的关键工具。通过正确使用它，你可以轻松地实现动态表单的增加和减少输入项功能，同时保留元素的事件绑定和数据。在编写这类交互式表单时，理解`clone()`函数的工作原理以及如何与DOM元素的事件处理程序配合至关重要。