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 中進行測試。 這些瀏覽器將按鈕的默認類型設置為提交而不是按鈕（來源）

因此，每次添加新字段時我的表單都會提交，然后它會重置。

一個我一直忽略的簡單錯誤。 這不是第一次發生，也絕對不會是最后一次。