JQuery ajax 在切换切换时执行多次答案

【问题标题】：JQuery ajax executing multiple times on switch toggleJQuery ajax 在切换切换时执行多次
【发布时间】：2018-01-16 00:23:53
【问题描述】：

我有一个所有插座的表格列表，我有一个实现 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");
            }
        });

    });

});

谢谢

【问题讨论】：

从你的代码：每次用户点击.switch你的代码添加新的change事件监听器，所以如果用户点击.switch两次，你将在内存中有两个相等的事件监听器并且每次点击都会添加新的和新的听众
@MysterX 谢谢你的回复，你能告诉我如何处理这个
添加为答案

标签： javascript jquery ajax laravel-5 laravel-blade

【解决方案1】：

您的循环创建多个具有相同类switch 的div，当您单击该类时，所有具有switch 类的div 都会调用ajax 发布。因此，请为循环中的每个 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.....

}

【讨论】：

【解决方案2】：

发生这种情况是因为每次单击开关时都会添加一个侦听器，您不应该有这个嵌套的侦听器，

我要做的是在所有输入类型复选框上添加用于复选框更改的委托函数，我会给这些输入一个类以简化我的选择

$(".switch").on('change','.CheckBoxClass', function(){
var theid = $(this).parent('.switch').data('id');
var status = $(this).prop('checked');
//add the rest of your code
});

【讨论】：

【解决方案3】：

您只需分离事件侦听器并使用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");
            }
        });

    });

【讨论】：