Jquery克隆功能不起作用

Question

我试图在点击按钮时复制div。但是，当我点击按钮时，div显示，页面刷新并删除div。 这是我的jscript代码：

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

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

    });

这是我的HTML代码

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

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

我希望如果用户点击div而没有刷新页面的按钮...

Answer 1

button充当提交，因为它可能正在进行页面提交，因此您可以尝试更改按钮标记，来自：

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

到

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

如果没有指定按钮标记的类型默认为submit，那么您也可以尝试添加type =＆＃34; button＆＃34;为：

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

Answer 2

刚刚检查了你的代码 Fiddle

它似乎工作正常。如果在加载按钮元素之前加载了javascript，请将click事件保存在$（document）.ready（handler）;

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

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

    });
});