[英]JQuery ajax executing multiple times on switch toggle
我有所有插座的列表,有一个实现CSS的按钮可以激活或停用插座,
@foreach($outlets as $outlet)
<tr>
<td>
<div class="switch m-b-md" data-id="{{$outlet->id}}">
<label>
@if($outlet->status == 'active')
<input id="agent-status" type="checkbox" checked="">
@else
<input id="agent-status" type="checkbox">
@endif
<span class="lever"></span>
</label>
</div>
</td>
</tr>
@endforeach
问题是当我单击.switch
ajax执行多次时,如果我不断切换该开关,则执行5至10次以上
$(document).on("click", ".switch", function() {
var outlet_id = $(this).data('id');
$(".switch").find("input[type=checkbox]").on("change",function() {
var status = $(this).prop('checked');
if(status == true) {
status = "active";
} else {
status = "inactive";
}
$.ajax ({
url: '/manager/outlets/'+outlet_id+'/status',
type: 'POST',
data: {"id": outlet_id, "status": status, "_token": '{{ csrf_token() }}'},
success: function(data)
{
if(data.status==true) {
swal("Updated", "Status updated successfully", "success");
} else if(data.status==false) {
swal("Failed", "Fail to update status try again", "error");
}
},
error: function(error)
{
swal("Failed", "Fail to update status try again", "error");
}
});
});
});
谢谢
您只需要分开事件侦听器,并使用outlet_id
作为闭包即可从两个侦听器访问它。 见下文:
var outlet_id;
$(document).on("click", ".switch", function() {
outlet_id = $(this).data('id');
});
$(".switch").find("input[type=checkbox]").on("change",function() {
var status = $(this).prop('checked');
if(status == true) {
status = "active";
} else {
status = "inactive";
}
$.ajax ({
url: '/manager/outlets/'+outlet_id+'/status',
type: 'POST',
data: {"id": outlet_id, "status": status, "_token": '{{ csrf_token() }}'},
success: function(data)
{
if(data.status==true) {
swal("Updated", "Status updated successfully", "success");
} else if(data.status==false) {
swal("Failed", "Fail to update status try again", "error");
}
},
error: function(error)
{
swal("Failed", "Fail to update status try again", "error");
}
});
});
您的循环使用相同的class switch
创建多个div,当您单击该类时,所有带有switch
类的div都会调用ajax
post。 因此,请为循环中的每个div分配id
。
<div class="switch m-b-md" id="div_{{$outlet->id}}" onclick="callAjax('div_{{$outlet->id}}')">
你的ajax
:
function callAjax(divid){
//do your ajax call here.....
}
之所以会这样,是因为每次单击开关时都会添加一个侦听器,所以您不应该使用此嵌套的侦听器,
我要做的是为所有输入类型复选框上的复选框更改添加委托函数,我将为这些输入提供一个类以简化选择
$(".switch").on('change','.CheckBoxClass', function(){
var theid = $(this).parent('.switch').data('id');
var status = $(this).prop('checked');
//add the rest of your code
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.