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）同样在“Add New”上，我喜欢你禁用表单元素的想法，所以我会继续这样做。

很抱歉没有代码示例，但希望这会给你一个想法。

更高效的jquery克隆

2 个答案: