Question

我正在创建一个用户输入表单，最初包含1个信息'pod'，带有2个输入。有一个'Add Another'按钮通过clone（）/ insertBefore（）多次动态复制pod - 这似乎工作正常。这是我到目前为止所做的一个小提琴：http://jsfiddle.net/N6Xty/8/

以下两个功能变得混乱： 1：我只需要克隆的pod元素中的'Remove Me'按钮（即remove-self），而不是原始pod - 这只是略微工作，我尝试了2种方法，首先使用.removeClass（），第二次使用'如果'语句（已注释掉）但'if'抛出了我无法纠正的控制台语法错误。查看小提琴远比解释发生了什么容易得多，但是第一个'删除'按钮位于错误的窗格上，这是唯一真正有用的窗口...对于代码参考，有2个相关变量：'removeThisDivButton'和'removeThisDivButton02'

2：每个克隆的pod都有表单输入元素 - 我希望它们具有唯一的ID（例如，用于引用textarea的标签）所以我一直在努力实现动态id递增，但成功有限，我也在尝试实际pod上的唯一ID（不是100％req但我理想的是它）。为此，有2个'追加ID'脚本，一个使用'索引'，另一个注释掉我从这个SO帖子中得到的：Append ID's

（我已经看过其他'追加ID'的回复，但我不明白如何将它们应用于此。）

如果有人可以提前通知我，那么请提前致谢。

HTML：

<div id="outer-wrapper">
        <div class="content-wrapper">
            <a href="#" title="Duplicate" class="duplicate-butt">Add Another</a>
            <form name="userInfoForm" method="post" action="">
                <div id="info-div-" class="append-me-div">      
                    <select name="various-options">
                        <option>-- Please Choose --</option>
                        <option value="opt-one">One</option>
                        <option value="opt-two">Two</option>
                        <option value="opt-three">Three</option>
                    </select>
                    <label for="message-">Comments:</label>
                    <textarea id="message-" class="message-box" rows="10" cols="30"></textarea>

                    <a href="#" class="remove-this-div hidden-button">Remove ME</a>

                </div>
                <button type="submit" id="submit-button">Submit</button>
            </form>
        </div>
    </div>

jQuery的：

(function($){
        // append ID (partly working)
        $('#info-div-, #message-').each(function(index){
            $(this).attr({
                'id': this.id + index
            });
        });

        // duplicate the <div>append-me-div</div> + show the 'Remove Me' button
        var duplicateButton = $('a.duplicate-butt');
        var appendMeDiv = $('div.append-me-div');
        var removeThisDivButton = $('a.remove-this-div');
        //var removeThisDivButton02 = $('<a href="#" class="remove-this-div">Remove ME</a>');

        duplicateButton.on('click', function(index){
            appendMeDiv.clone().insertBefore('button#submit-button');

            // 'Remove Me' version01
            removeThisDivButton.removeClass('hidden-button');   

            // 'Remove Me' version02
            /*if (this.appendMeDiv:eq+=(1)){
                removeThisDivButton02.appendTo(this.appendMeDiv);
            }*/

            // append ID (PARTLY working)
            /*appendMeDiv.attr({
                'id': this.id += 1
            });*/

            // append ID (not working)
            var idIncrement = 0;
            $('#info-div-, #message-').each(function(){
            //$('#info-div-').each(function(){
                idIncrement++;
                $('this').attr('id', 'id'+idIncrement);
            });

            console.log('a.duplicate-butt clicked');
        });

        // remove the current/parent <div>append-me-div</div>
        removeThisDivButton.on('click', function(e){
            $(this).parent('div').remove();
            e.preventDefault(); // tried this to stop the page auto-scrolling back to top on click - not working
            console.log('CLICKED: a.remove-this-div');      
        });
    })(jQuery);

Answer 1

这应该让你去。您必须将新克隆存储为对象，然后对其进行操作。这肯定需要一些调整，但希望它会让你滚动。

http://jsfiddle.net/N6Xty/9/

所有的魔力都发生在这里：var newOne = appendMeDiv.clone();。享受！

Answer 2

这实际上非常简单，诀窍是将处理程序附加到原始“删除我”按钮，然后使用clone(true, true)克隆包括附加处理程序在内的所有内容：

(function($) {
    var appendMeDiv = $('.append-me-div');
    var submitButton = $('#submit-button');
    var count = 0;
    $('.remove-this-div').hide().on('click', function(e) {
        e.preventDefault();
        $(this).closest('.append-me-div').remove();
    });
    $('a.duplicate-butt').on('click', function(e) {
        e.preventDefault();
        var clone = appendMeDiv.clone(true, true).insertBefore(submitButton).find('.remove-this-div').show().end();
        var messageBox = clone.find('.message-box');
        var id = messageBox.attr('id') + ++count;
        messageBox.attr( 'id', id ).prev('label').attr( 'for', id );
    });
})(jQuery);

<强> DEMO

就个人而言，我会省略<label for="...">功能。在这种情况下，它并不是特别重要，因为textarea是一个比标签更大的目标。

javascript将减少为：

(function($) {
    var appendMeDiv = $('.append-me-div');
    var submitButton = $('#submit-button');
    $('.remove-this-div').hide().on('click', function(e) {
        e.preventDefault();
        $(this).closest('.append-me-div').remove();
    });
    $('a.duplicate-butt').on('click', function(e) {
        e.preventDefault();
        appendMeDiv.clone(true, true).insertBefore(submitButton).find('.remove-this-div').show();
    });
})(jQuery);

<强> DEMO

用jquery动态克隆元素 - 不能.remove（）它们或增加它们的ID

2 个答案: