insertAfter with Load , div element disappear

Question

I have a main div on two pages ie page1.php and 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;
}

Now when i click on Add button, its not adding other form / div class='single_class' next to it... but it disappers

And when i check with inspect element of Chrome Developer Tool, theres nothing.. whole body is empty except javascript

Now how can i add page load option on click of button, next to it.

Edited / Added

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

the above fiddle may not be apporiate...

Andy · Accepted Answer · 2012-06-27T11:34:08.497

1

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

Inserts .main_div after .single_div, which doesn't make sense

.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.

I think you want something like that:

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

edited Jun 27 '12 at 11:34

answered Jun 27 '12 at 11:18

Andy

29,707
9
41
58

@Rafee $('.single_div') fetches all divs with that class. But in your case you'll want only one. .eq(0) returns the first element in the set. – Andy Jun 27 '12 at 11:33

score 1 · Answer 2 · answered Jun 27 '12 at 11:23

What happens in your code with insertAfter is this; it takes the element, removes it from the DOM tree, then tries to insert it after the target. By the time it tries to insert it after the target, the target is removed from the DOM tree. Hence it's empty.

Try the following instead:

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

Including true in the clone() makes sure events are copied as well.

Sadly, there seems to be a lot more wrong here. I'm not quite sure what you are trying to do. You just want to have a copy of that single_class div after each click on the add button?

insertAfter with Load , div element disappear

page1.php

form.php

css.css

Edited / Added

2 Answers2