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

上面的工作，但问题是，当页面刷新并且每个开关都基于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;
});

希望有所帮助。

Bootstrap切换/开关在某些条件下阻止onChange事件

1 个答案: