Bootstrap 切换/开关在某些情况下防止 onChange 事件

Question

我有引导开关，如果不是触发它的用户，我想防止 onChange 触发器发生。

我使用 onChange 触发器来运行 AJAX 脚本。但是当页面刷新时，我会根据 JSON 数组更改检查状态。问题是，当我这样做时，会触发 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();
        }
    }
});

上面的工作，但问题是当页面被刷新并且每个开关都基于clientStatusList设置时，onChange事件被触发并且toggleClient方法也被触发，我只想在用户发生做onChange。

这可能吗，还是我应该有其他方法？

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;
});

希望对您有所帮助。