我有一个所有 socket 的表格列表,我有一个物化 CSS 按钮来激活或停用 socket ,
@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");
}
});
});
关于javascript - JQuery ajax 在开关切换时执行多次,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/45568201/