更高效的 jquery 克隆

Question

所以我使用 jquery 克隆一个 div，这样我就可以保持输入数组的大小动态。它工作正常，但我忍不住看着它，并认为在克隆之前添加类，这样我就可以在克隆之后删除旧的添加更多链接，并在从克隆中删除类后删除旧的添加更多链接，这样可以更有效地完成。或者也许总体上更有效的方法来做到这一点。

这是 html：

<div class="reg_heading_description" id="bio_brothers"></div>
                <div class="bio_brother">
                    <div class="clearfix">
                    <label>First Name</label>
                        <div class="input">
                        <input type="text" name="bio_brother_first[]" style="float:left"/>
                    <label>Last Name</label>
                        <input type="text" name="bio_brother_last[]" style="margin-left:20px;"/>                            
                        </div>                          
                    </div>
                    <div class="clearfix">
                    <a href="#" class="more_bio_brother more_relatives" >Add Another</a>
                    </div>
                </div>
            </div>  

这是 jquery，是的，它处于无冲突模式

<script type="text/javascript">
jQuery(document).ready(function () {

    jQuery(".more_bio_brother").click(function () {
        var here = jQuery(this).closest('div').parent();
        var names = jQuery(here).find('input');
        //validate
        var check = 0;
        jQuery.each(names, function () {
            if (jQuery(this).val() == "") {
                check = 1;
            }
        });
        if (check == 1) {
            alert('You must enter a first and last name for this biological brother before you can add another.');
            return false;
        }
        //disable prior 
        jQuery.each(names, function () {
            jQuery(this).attr('readonly', true);
        });
        //add new
        jQuery(here).addClass('old');
        jQuery('#bio_brothers').before(jQuery(here).clone(true));
        jQuery.each(names, function () {
            jQuery(this).attr('readonly', false);
            jQuery(this).val("");
        });
        jQuery(here).removeClass('old');
        jQuery('.old a').remove();
        return false;
    });
});
</script>

Answer 1

想要比你要求的更多吗？

我遇到过类似的情况，我实际上会做一些事情，附加事件，添加数据等到一组元素（验证，更改事件，等等）。我什至在每一“行”上都有一个删除按钮。因此，我不仅需要克隆，还需要克隆数据、事件等，但并非总是如此。有时我需要在最后一行之前、最后等处添加新内容。

我还希望能够链接我的自定义行加法器。

我还想要存在默认数量的“空白”行。

因此，鉴于您的结构（稍作修改），我想出了这个：http://jsfiddle.net/BGJNP/

编辑：添加了一个按规定进行一些验证的版本：http://jsfiddle.net/BGJNP/1/

Answer 2

可能至少有六种完全有效的方法来实现您的目标并使其更加高效。为了我的两分钱，我会：

A）在页面上只保留一个“添加新”链接，将一个事件绑定到它，并且永远不要克隆和销毁它。您的“添加新”始终只有一项工作：添加新的空表单。

B) 在“添加新内容”中，我将准备好一个迷你表单，无论是作为 HTML 字符串还是作为独立的 DOM 节点。对于前者，使用字符串并将其附加到需要的位置；对于后者，克隆它并将其附加到您想要的位置（原始版本仍未附加并准备好下次使用）。哎呀，如果您想执行后者，当页面首次初始化时，会有一个空表单，您可以将其克隆为“模板”。

C）另外，关于“添加新内容”，我喜欢你禁用表单元素的想法，所以我会继续这样做。

抱歉没有代码示例，但希望这能给您一个想法。