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;
}

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

当我查看inspect element的{{1}}时，没有任何内容......整个身体都是空的，除了javascript

现在我如何在点击按钮旁边添加页面Chrome Developer Tool选项。

已编辑/已添加

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

以上小提琴可能不适合......

Answer 1

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

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

.insertAfter（target）
target：选择器，元素，HTML字符串或jQuery对象;匹配的元素集将插入此参数指定的元素之后。

我想你想要这样的东西：

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

Answer 2

使用insertAfter的代码中会发生什么情况;它接受元素，将其从DOM树中删除，然后尝试在目标之后插入它。当它尝试在目标之后插入它时，目标将从DOM树中删除。因此它是空的。

请尝试以下方法：

$(".main_div").clone(true).insertAfter(".single_div").load('www.google.com');

在clone（）中包含true可确保复制事件。

可悲的是，这里似乎有很多错误。我不太确定你要做什么。您只想在每次单击添加按钮后获得该single_class div的副本吗？

insertAfter with Load，div元素消失

page1.php中

form.php的

css.css

已编辑/已添加

2 个答案: