87,994
社区成员
发帖
与我相关
我的任务
分享关于bootstrap模态框的问题
各位大佬，非常荣幸能受到你们的指导~
问题是这样的，在用bootstrap模态框时，上面有两个按钮，点击确定按钮后，第一次请求是正常的，第二次请求开始就开始累加了，百度找到的东西和我的问题并不匹配，还请各位大佬帮帮忙，，小弟感激不尽。。。。。
代码：
直接从官网搞下来的，给确定按钮加了一个id
js代码
截图：
第一次是正常的
第二次以后就开始累加了
然后在控制台通过模态框隐藏后的事件进行监听，得到下面的结果，也是累加的
该怎么搞才能让点击一次只执行一次操作呢。。。跪求大佬指教
问题是这样的，在用bootstrap模态框时，上面有两个按钮，点击确定按钮后，第一次请求是正常的，第二次请求开始就开始累加了，百度找到的东西和我的问题并不匹配，还请各位大佬帮帮忙，，小弟感激不尽。。。。。
代码：
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">提示</h4>
</div>
<div class="modal-body">
是否确定删除当前记录？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="queding">确定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>直接从官网搞下来的，给确定按钮加了一个id
js代码
$('#myModal').modal('toggle');
$("#myModal").on("hidden.bs.modal",function() {
console.log($(this));
});
//点击确定按钮执行的ajax请求
$('#queding').on('click',function(){
$.ajax({
url:'/User/Delete',
type:'POST',
dataType:'json',
data:{id:id},
success:function(){},
error:function(){
alert('数据异常！');
$('#myModal').modal('hide');
}
});
})截图：
第一次是正常的
第二次以后就开始累加了
然后在控制台通过模态框隐藏后的事件进行监听，得到下面的结果，也是累加的
该怎么搞才能让点击一次只执行一次操作呢。。。跪求大佬指教
...全文
请发表友善的回复…
发表回复
Sir丶糯米 2017-09-28
- 打赏
- 举报
嗯嗯，经过您的提醒，我在外边声明了一个变量，在调用删除的时候把id赋给变量，然后在外边进行的确定事件，没有累加了~
jio可 2017-09-28
- 打赏
- 举报
可以声明变量记录当前操作的id,在s1里面写显示模态框，给模态框的确认按钮写一个点击事件函数，点击的时候获取保存id的变量执行ajax请求。你的click事件写在点击时间里面会重复绑定事件，自然就累加了
Sir丶糯米 2017-09-28
- 打赏
- 举报
谢谢大佬，的确是放在里面的过失，放在外边就好了，我想辙把拆一下就好~谢谢~~
Sir丶糯米 2017-09-28
- 打赏
- 举报
是这样的，让我用vue和boot来搭界面，然后表单数据是通过vue的方式加载进来的
这是整体的代码
html:
<div class="panel panel-default">
<div class="panel-heading">
<div class="panel-title">
基本的datatables
</div>
</div>
<div class="panel-body">
<table id="table_local" class="table table-bordered table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>FirstName</th>
<th>LastName</th>
<th>EnrollmentDate</th>
<th>Discriminator</th>
<th>Discriminator</th>
<th>Discriminator</th>
<th>Discriminator</th>
<th class="text-center">设置</th>
</tr>
</thead>
<tbody>
<tr v-for="kiss in tableList">
<td>{{ kiss.id }}</td>
<td>{{ kiss.fitstName }}</td>
<td>{{ kiss.listName }}</td>
<td>{{ kiss.enrollmentDate }}</td>
<td>{{ kiss.discriminator }}</td>
<td>{{ kiss.module }}</td>
<td>{{ kiss.window }}</td>
<td>{{ kiss.book }}</td>
<td class="text-center">
<a :href="'index.html?id=' + kiss.id">编辑</a>
<!-- 由于上面的内容是通过vue加载进来的，我也是直接找的用法，vue也不了解，然后下面删除需要传id，我看这种方式能传，就搞进来了 -->
<a href="#foo" data-toggle="modal" data-target="#myModal" v-on:click="s1(kiss.id)">删除</a>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">提示</h4>
</div>
<div class="modal-body">
是否确定删除当前记录？
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" id="queding">确定</button>
<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
</div>
</div>
</div>
</div>var table_local = new Vue({
el: '#table_local',
data:{
tableList:[
{id:'001',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-01',discriminator:'哈哈1',module:'文本1',window:'文本2',book:'javascript'},
{id:'002',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-02',discriminator:'哈哈2',module:'文本2',window:'文本2',book:'javascript'},
{id:'003',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-03',discriminator:'哈哈3',module:'文本3',window:'文本2',book:'javascript'},
{id:'004',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-04',discriminator:'哈哈4',module:'文本4',window:'文本2',book:'javascript'},
{id:'005',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-05',discriminator:'哈哈5',module:'文本5',window:'文本2',book:'javascript'},
{id:'006',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-06',discriminator:'哈哈6',module:'文本6',window:'文本2',book:'javascript'},
{id:'007',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-07',discriminator:'哈哈7',module:'文本7',window:'文本2',book:'javascript'},
{id:'008',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-08',discriminator:'哈哈8',module:'文本8',window:'文本2',book:'javascript'},
{id:'009',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-09',discriminator:'哈哈9',module:'文本9',window:'文本2',book:'javascript'},
{id:'010',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-10',discriminator:'哈哈10',module:'文本10',window:'文本2',book:'javascript'},
{id:'011',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-11',discriminator:'哈哈11',module:'文本11',window:'文本2',book:'javascript'},
{id:'012',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-12',discriminator:'哈哈12',module:'文本12',window:'文本2',book:'javascript'},
{id:'013',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-13',discriminator:'哈哈13',module:'文本13',window:'文本2',book:'javascript'},
{id:'014',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-14',discriminator:'哈哈14',module:'文本14',window:'文本2',book:'javascript'},
{id:'015',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-15',discriminator:'哈哈15',module:'文本15',window:'文本2',book:'javascript'},
{id:'016',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-16',discriminator:'哈哈16',module:'文本16',window:'文本2',book:'javascript'},
{id:'017',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-17',discriminator:'哈哈17',module:'文本17',window:'文本2',book:'javascript'},
{id:'018',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-18',discriminator:'哈哈18',module:'文本18',window:'文本2',book:'javascript'},
{id:'019',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-19',discriminator:'哈哈19',module:'文本19',window:'文本2',book:'javascript'},
{id:'020',fitstName:'Tom',listName:'Cat',enrollmentDate:'2017-04-20',discriminator:'哈哈20',module:'文本20',window:'文本2',book:'javascript'}
]
},
methods: {
//置顶
s1: function(id){
//点击确定按钮执行的ajax请求$('#myModal').modal('toggle');
$('#queding').on('click',function(){
$.ajax({
url:'http://60.205.106.24:8080/YuCiIACSP/User/Delete',
type:'POST',
dataType:'json',
data:{id:id},
success:function(){},
error:function(){
alert('数据异常！');
$('#myModal').modal('hide');
}
});
})
}
}
});jio可 2017-09-28
- 打赏
- 举报
$('#queding').on('click',function(){
$.ajax({
url:'/User/Delete',
type:'POST',
dataType:'json',
data:{id:id},
success:function(){},
error:function(){
alert('数据异常！');
$('#myModal').modal('hide');
}
});
})
