我有一个所有插座的表格列表,我有一个实体化 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");
}
});
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句