私はすべてのアウトレットのテーブルのリストを持っているスイッチトグル

Question

に複数回実行するjQueryのアヤックスは、私が口を有効または無効にするマテリアライズ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アヤックスをクリックしたときに問題があります私はそれがより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"); 
      } 
     }); 

    }); 

}); 

を実行しているスイッチをトグルし続ける場合は、複数回の実行では、あなたに感謝

Answer 1

あなたは自分のイベントリスナーを分離し、両方のリスナーから、それへのアクセス権を持っているクロージャとして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"); 
      } 
     }); 

    }); 

Answer 2

あなたのループは、sの複数のdiv要素を作成しますAMEクラスswitch、あなたがクラスをクリックすると、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..... 

} 

Answer 3

それが起こっているスイッチがクリックされるたびに、リスナーが追加されているので、あなたがこのネストされたリスナーを持つべきではない、私はどうなるのか

すべての入力タイプのチェックボックスを変更するための代理関数を追加しています。私はこれらの入力に選択を簡単にするクラスを与えます。

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