Javascript 使用jQuery构建动态表单零件

（希望这不会重复；第二次尝试提交此问题）

我正在开发一个表单，在这个表单中，我想让用户能够添加一个未知数量的联系人（姓名和电话号码）。我只想首先显示这些表单字段中的一行，并允许用户单击一个元素，该元素将添加初始行的副本（当然是空的，并且带有更新的ID，以便在返回控制器（ASP.NET MVC应用程序）时处理该数据）

我发现了一些使用jQuery库1.2.x版的示例，但我似乎无法让它们中的任何一个使用1.3.2版。问题与$.clone（）方法有关。当我在选择器/元素上调用此方法时，页面会进行完全刷新，用户会看到一个干净的表单

我正在使用的当前示例（从中提取）如下所示：

桌子-

<table id="tabdata">
            <thead>
                <tr>
                    <th>Row</th>
                    <th>Cell 1</th>
                    <th>Cell 2</th>
                    <th>Cell 3</th>

                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><a id="addnew" href="">Add</a></td>
                    <td><input id="n0_1" name="n0_1" type="text" /></td>
                    <td><input id="n0_2" name="n0_2" type="text" /></td>

                    <td><input id="n0_3" name="n0_3" type="text" /></td>
                    <td></td>
                </tr>
            </tbody>
        </table>

一行
第1单元
第2单元
第三单元

剧本-

<script type="text/javascript">
    $(function() {
        var newRowNum = 0;

        $('#addnew').click(function() {
            newRowNum++;
            var addRow = $(this).parent().parent();
            var newRow = addRow.clone();
            $('input', addRow).val('');
            $('td:first-child', newRow).html(newRowNum);
            $('td:last-child', newRow).html('<a href="" class="remove">Remove<\/a>');
            $('input', newRow).each(function(i) {
                var newID = newRowNum + '_' + i;
                $(this).attr('id', newID).attr('name', newID);
            });
            addRow.before(newRow);

            $('a.remove', newRow).click(function() {
                $(this).parent().parent().remove();
                return false;
            });

            return false;
        });
    });
 </script>

$（函数（）{
var newRowNum=0；
$（'#addnew'）。单击（函数（）{
newRowNum++；
var addRow=$（this.parent（）.parent（）；
var newRow=addRow.clone（）；
$（'input'，addRow）.val（''）；
$（'td:first child'，newRow）.html（newRowNum）；
$（'td:last child'，newRow）.html（'Remove'）；
$（'input'，newRow）.每个（函数（i）{
var newID=newRowNum+'.'+i；
$（this.attr（'id'，newID）.attr（'name'，newID）；
});
addRow.before（newRow）；
$（'a.remove'，newRow）。单击（函数（）{
$（this.parent（）.parent（）.remove（）；
返回false；
});
返回false；
});
});

当该方法状态为“var newRow=addRow.clone（）；”时，页面将重新加载。不知道原因，但在早期的jQuery版本上运行该脚本，效果很好。如果可以的话，我不希望返回版本

有什么想法吗？有没有更好的方法来实现这一点？它应该很简单，但被证明比我所选择的库更乏味。

你的代码。它在Firefox 3和IE 7中对我都很好。代码使用jQuery 1.3.2。如果你想编辑代码，只需将

/edit

添加到URL

一些想法-

• 您正在哪个浏览器中查看不起作用的代码
• 您是否有其他可能导致冲突的JavaScript库

---

我正在FF 3中测试脚本。引用旧脚本在同一浏览器中工作。该应用程序在MVC中，但我真的认为这不会有什么区别。安装了另一个jQuery插件。我将尝试删除该插件，看看是否存在冲突。奇怪的是……我只是重新加载了VS并运行了相关页面，只是为了验证我看到的行为，它工作得很好。我一定有什么问题，需要一个干净的开始。因此，不一定是一个解决方案，但检查其他jQuery冲突是对未来的好建议。谢谢！