jQuery clone（）无效

Question

我有一个非常简单的jQuery clone()：

<script type="text/javascript">
    $("#reset").click(function () {
        location.reload(); 
    });
    $("#clone").click(function () {
       //$('.hq').clone().insertAfter(".hq");
       $('.hq').clone().appendTo('.hq');
    }); 
</script>                        

 <div class="hq">
    <div class="textboxs">
         <select name="hq">
              <option value="-1">Select Headquarter</option>
                <?php for( $i = 0; $i < count( $get_hq_r ); $i++ ) { ?>
                  <option value="<?php echo $get_hq_r[0]['id']; ?>"><?php echo $get_hq_r[$i]['name']; ?></option>
                <?php } ?>
         </select>    
    </div>
 </div>
<button id="clone">Add more</button> <button id="reset">Reset</button>

但是，当我点击Add more按钮，克隆div时，它会刷新页面！

Answer 1

听起来您的button位于表单内部，因此点击后会提交表单。您可以在event.preventDefault()处理程序中使用click来停止它：

$('#clone').click(function(e) {
  e.preventDefault();
  // your code
});