jQuery 克隆表单字段消失

Question

我正在使用下面的代码复制表单的一部分。 不幸的是，复制的字段会在“消失”之前出现一瞬间。 有没有人看到任何可能导致这种情况的明显错误？

jQuery 复制脚本

<script type="text/javascript">

$(document).ready(function()
{   
    $( '#addButton' ).bind( 'click', function()
    {
        var $clone = $( '.template' ).clone();

        $clone.removeClass( 'template' );
        $clone.appendTo( '.LHS_interior' );
    });
});

</script>

模板

<!-- class 'template' is simply 'display:none;' -->
<div class="template">

        <div style="position:relative; float:left; width:50%;">

            <label for="billable_task">Charge Number:</label>
            <select name="billable_task" id="billable_task" onchange="resetSelect('unbillable_task');enable('submit');">

                ...

            </select>   
        </div>

        <div style="position:relative; float:right; width:45%;">

            <label for="duration">Duration:</label>
            <input size="5" type="text" name="duration" id="duration" />

        </div>

</div>

插入位置

<div style="position:relative; float:left; width:25%;">

    <div class="LHS_interior"></div>

    <button id="addButton" type="button" class="button add">Add Charge</button>

</div>

---

那么这段代码有什么明显的问题吗？

Answer 1

确定不是其他原因造成的？ 我将您的代码复制并粘贴到 jsfiddle 中，它工作正常： http://jsfiddle.net/Paulpro/ejWwM/2/

尽管我没有按照您想要的方式将它们布置好，但它肯定会克隆每个模板

Answer 2

在这个 jsFiddle 上运行它可以正常工作（虽然样式很糟糕）。 http://jsfiddle.net/4qtcP/

我的猜测是，您有一些样式会碰撞浮动或将其定位在具有溢出的父容器的边界之外：隐藏；。

你可能想用更多的 CSS 来编辑那个 jsfiddle。

Answer 3

经过几个小时的折腾，终于弄明白了。

原始消息中发布的代码起作用的原因是，它是正确的。 似乎当我在帖子中输入代码时，我输入的代码与我的工作代码中存在的不同。 有什么区别？

<button id="addButton" type="button" class="button add">Add Charge</button>

在我的工作代码中是：

<button id="addButton" class="button add">Add Charge</button>

问题是我在 Chrome 和 Firefox 中进行测试。 这些浏览器将按钮的默认类型设置为提交而不是按钮（来源）

因此，每次添加新字段时我的表单都会提交，然后它会重置。

一个我一直忽略的简单错误。 这不是第一次发生，也绝对不会是最后一次。