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默认情况下，所以你也可以尝试加式=“按钮”为：

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

Answer 2

刚才检查你的代码上拨弄 Fiddle

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

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

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

    }); 
});