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/

我的猜测是你有一些样式会碰到浮动或将它定位在有溢出的父容器边界之外：hidden;。

你可能想用更多的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中进行测试。这些浏览器将按钮的默认类型设置为提交，而不是按钮（source）

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

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

jQuery克隆表单字段消失

3 个答案: