Question

jsfiddle：

我正在创建一个移动表单，允许用户根据需要添加另一行输入。

HTML：

<div data-role="collapsible" data-theme="a" data-content-theme="d" data-collapsed-icon="arrow-d" data-expanded-icon="arrow-u">
                <h4>Resident Birthday Cards</h4>
                <div data-role="fieldcontain">
                    <table id="bcard_table">
                        <tr>
                            <th style="width:30%;">DATE</th>
                            <th style="width:40%;">NAME</th>
                            <th style="width:30%;">APT</th>
                        </tr>
                        <tr class="bcard_entry">
                            <td><input type="date" name="bcards_date[]" /></td>
                            <td><input type="text" name="bcards_name[]" /></td>
                            <td><input type="text" name="bcards_apt[]" /></td>
                        </tr>
                    </table>
                    <p><a href="#" data-role="button" data-mini="true" data-inline="true" data-icon="plus" data-theme="b" id="btnBCard">Add Another</a></p>
                </div>
            </div>

JQUERY：

$(document).on('pagebeforeshow', '#index', function(){       
        $(document).off('click', '#btnBCard').on('click', '#btnBCard',function(e) {
            $('.bcard_entry').clone().appendTo('#bcard_table');
        }); 
    });

我知道问题是什么 - 因为我在班级bcard_entry中修改了一切，它第一次附加了一个副本（但现在有两个类）。第二次将克隆BOTH现有行并附加它们等等。

现在我知道问题是什么，但我不知道如何避免它。

这样做的正确方法是什么？

非常感谢任何指导和帮助。

Answer 1

您可以在要克隆的行上使用ID，并通过ID引用它（确保删除克隆副本中的ID）。

或者你只能克隆第一行。在JS中可能是这样的：

document.getElementById('bcard_table').appendChild(document.querySelector('.bcard_entry').cloneNode(true));

您可能也希望清除值并更新字段名称。

或者，您可以使用模板。你可以使用一些很好的工具，比如Mustache（或创建你自己的工具）。

Jquery Mobile：多次添加克隆行

1 个答案: