php - insertAfter 使用 Load ，div 元素消失

Question

我在两个页面上有一个主 div，即 page1.php 和 form.php

page1.php

<div class="main_div">
    <?php require('form.php'); ?>
</div>

<script>
    $(".add_one").click(function(){
        $(".main_div").insertAfter(".single_div").load('form.php');
    });
</script>

form.php

<div class="single_div">
    <table>
        <tr>
            <td><input type="text" class="text1" /></td>
            <td><input type="button" class="add_one" value="Add" /></td>
            <td>Some other fields too</td>
        </tr>
    </table>
</div>

css.css

.single_div {
    background-color: green;
    float: left;
    margin-left: 10px;
}

现在，当我单击添加按钮时，它不会在旁边添加其他form/div class='single_class'...但它消失了

当我使用 Chrome 开发者工具 的 inspect element 检查时，什么都没有..除了 javascript 之外，整个内容都是空的

现在如何在单击旁边的按钮时添加页面加载选项。

编辑/添加

http://jsfiddle.net/marafee1243/ErN5E/

上面的 fiddle 可能不合适......

Answer 1

$(".main_div").insertAfter(".single_div").load('form.php');

在.single_div之后插入.main_div，这没有意义

.insertAfter( target )
target: A selector, element, HTML string, or jQuery object; the matched set of elements will be inserted after the element(s) specified by this parameter.

我想你想要这样的东西:

$('.single_div').eq(0).clone(true).appendTo('.main_div');