Bootstrap toggle/switch在某些情況下阻止onChange事件

Question

我有bootstrap-switch，在那裏我想阻止onChange觸發器發生，如果它不是觸發它的用戶。

我使用onChange觸發器來運行AJAX腳本。但是當頁面刷新時，我更改基於JSON數組的checkstate。問題是，當我這樣做時，onChange事件被觸發，導致AJAX腳本運行，我不想發生，除非它是發出onChange的用戶。通過套接字連接到nodeJs服務器，有可能在加載頁面後交換機也可能發生更改。

的複選框他們自己是這樣的：

<input type="checkbox" class="switch" id="clientid_{{$client->id}}" name="toggle" onChange="toggleClient({{$client->id}});"> 

這是時觸發開關切換功能：

function toggleClient(id) 
{ 
    var toggle = $("#clientid_"+id).is(":checked"); 
    var url = "/toggleClient"; 

    $.ajax({ 
     type: "POST", 
     url: url, 
     data :{ 
      "toggle": toggle, 
      "id": id, 
     } 
    }); 
} 

這是加載頁面時什麼運行

$(document).ready(function() { 
    //... getting obj.params.clientList herre 
    var clientStatusList = JSON.parse(obj.params.clientList); 
    for(client in clientStatusList) 
    { 
     if(clientStatusList[client].status == true) 
     { 
      $("#clientid_" + clientStatusList[client].id).prop('checked', true).change(); 
     } 
     else 
     { 
      $("#clientid_" + clientStatusList[client].id).prop('checked', false).change(); 
     } 
    } 
}); 

上面的工作，但問題是，當頁面刷新和每個交換機得到se t基於clientStatusList，onChange事件被觸發，因此toggleClient方法也被觸發，我只想在用戶執行onChange時發生。

這是甚至可能或應該我有另一approuch？

Answer 1

您可以對JavaScript的修改完畢綁定事件：

$(document).ready(function() { 
    //... getting obj.params.clientList herre 
    var clientStatusList = JSON.parse(obj.params.clientList); 
    for(client in clientStatusList) { 
     if(clientStatusList[client].status == true) { 
     $("#clientid_" + clientStatusList[client].id).prop('checked', true).change(); 
     } else { 
     $("#clientid_" + clientStatusList[client].id).prop('checked', false).change(); 
     } 
     $("#clientid_" + clientStatusList[client].id).change(function() { 
      toggleClient($(this).prop('id')); 
     } 
    } 
}); 

，或者你可以只設置一個布爾值，以檢查是否加載頁面時

var loaded = false; 
function toggleClient(id) { 
    if (!loaded) return; 
    var toggle = $("#clientid_"+id).is(":checked"); 
    var url = "/toggleClient"; 

    $.ajax({ 
     type: "POST", 
     url: url, 
     data :{ 
      "toggle": toggle, 
      "id": id, 
     } 
    }); 
} 
$(document).ready(function() { 
    loaded = true; 
}); 

希望有所幫助。