我的jquery代码在bootstrap中不起作用。我有一些列,我想把提交表格放在特定的列中但是当我使用表单标签时,我的jquery不会工作。
<body>
<form>
<div class="row" id="row1">
<div class="col-sm-6" id="col-1">
<button id="btn">hide me</button>
</div>
<div class="col-sm-6" id="col-2">
</div>
</div>
<div class="row">
<div class="col-sm-6" id="col-3">
</div>
<div class="col-sm-6" id="col-4">
</div>
</div>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("#row1").slideUp("slow");
});
});
</script>
答案 0 :(得分:2)
您需要使用preventDefault(),如下所示:
$(document).ready(function(){
$("#btn").click(function(e){
e.preventDefault();
$("#row1").slideUp("slow");
});
});
当您放置form
标记并且其中包含button
标记时,默认操作是提交表单。因此,您需要先使用preventDefault()
来阻止它。
如果它解决了这个问题,请告诉我。