0

所以我使用 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>
4

2 回答 2

1

想要比你要求的更多？

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

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

我还想要一个默认数量的“空白”行。

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

编辑：添加了一个具有某些验证的版本：http: //jsfiddle.net/BGJNP/1/

于 2011-12-15T19:14:58.993 回答
1

可能至少有六种完全有效的方法可以实现您的目标并使其更有效率。对于我的两分钱，我会：

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

B) 在“添加新”上，我将准备好一个迷你表单，可以是 HTML 字符串，也可以是未附加的 DOM 节点。对于前者，使用字符串并将其附加到需要去的地方；对于后者，克隆它并将其附加到您想要的位置（原件仍然未附加并准备好下次使用）。哎呀，如果你想做后者，当页面第一次初始化时，有一个空表单，你可以克隆为你的“模板”。

C）同样在“添加新”上，我喜欢你禁用表单元素的想法，所以我会继续这样做。

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

于 2011-12-15T19:57:47.583 回答