如何将onclick事件绑定到更改事件的INSTEAD复选框？

Question

这是我的问题。

我正在为某些设备制作控制面板。 现在，用户可以启用/切换开/关开关（复选框），远程设备也可以。 这反映在数据库中。 但是，无论何时用户（不是设备）切换以启用设备（复选框==已选中），我都希望有一个确认框。 用户禁用（切换，复选框== false）设备时，不需要确认框。 我每隔几秒钟检查一次数据库，以查看设备的状态（因为设备可以自行打开或关闭）

到目前为止，这就是我所拥有的（它无法正常工作。什么都没有发送到数据库。单击时不会在用户单击复选框时触发）

$(function() {
    $('#toggle').bootstrapToggle({
      on: TR_Toggle_On,
      off: TR_Toggle_Off
    });
    check_enable();

    function check_enable() {
        var timer = setInterval(function(result) {
            $.ajax({
                type: "get",
                url: "checkState.php",
                success: function(result) {
                    var enabled =parseInt(result);
                    if (enabled ===1) {
                        $( '#toggle').bootstrapToggle('on');
                    } else {
                        $( '#toggle').bootstrapToggle('off');
                    }
                }
            });
        }, 5000);
    }

    $('#toggle').on('click',function(){
        $('#toggle').change(function() {
            if ($('#toggle').prop('checked') ===true) {
                if(confirm("Sure?")){
                    $.ajax({
                    type: "get",
                    url: "setEnable.php",
                    data: "enable=1"
                    });
                }else{
                    $('#toggle').prop('checked',false);
                }
            } else {
                $.ajax({
                    type: "get",
                    url: "setEnable.php",
                    data: "enable=0"
                });
            }
        })
    })


})

我怎样才能做到这一点？ 当我尝试注册on（'click'，func（）{}）事件时，没有任何反应。 我认为它不适用于复选框吗？ 我究竟做错了什么？

Answer 1

是的，它适用于复选框。

尝试了一个像这样的最小示例：

<input type="checkbox" class="toggle" name="dog" value="TinyDog" /> what does the dog say

$(document).ready(function() {
 $('.toggle').on('click',function(){
  alert("woff woff");
  }); 
});

尝试添加一些console.log行或警报，以查看代码失败的地方。

Answer 2

您正在将一个事件绑定到另一个事件中。

$('#toggle').on('click',function(){
    $('#toggle').change(function() {
    ...
    }
}

您应该只绑定一次，像这样...

    $('#toggle').on('click',function(){
        if ($('#toggle').prop('checked') ===true) {
            if(confirm("Sure?")){
                $.ajax({
                type: "get",
                url: "setEnable.php",
                data: "enable=1"
                });
            }else{
                $('#toggle').prop('checked',false);
            }
        } else {
            $.ajax({
                type: "get",
                url: "setEnable.php",
                data: "enable=0"
            });
        }
    }