jQuery克隆功能不起作用

Question

I am trying to duplicate a div while clicking on a button. But when i click on the button the div appears, page refreshes and div removed. Here is my jscript code:

$("#button").click(function () {

        $('.duplicater').clone().insertAfter(".duplicater");

    });

Here is my html code

<div id="duplicater" class="duplicater">
The text goes here
</div>

<button id="button" class="btn btn-info btn-xs">Add More</button>

i want if the user clicks on the button the div appears without refreshing page...

Answer 1

button acts as submit due to which it might be doing page submit, so you could try changing your button tag, from:

<button id="button" class="btn btn-info btn-xs">Add More</button>

to

<input type="button" id="button" class="btn btn-info btn-xs" value="Add More" />

if none specified the type of button tag is submit by default, so you could also try adding type="button" as:

<button type="button" id="button" class="btn btn-info btn-xs">Add More</button>

Answer 2

Just checked your code on fiddle Fiddle

Its seems working fine . Incase the the javascript is loaded before loading the button element please keep the click event inside $(document).ready(handler);

$(document).ready(function(){
    $("#button").click(function () {

        $('.duplicater').clone().insertAfter(".duplicater");

    });
});