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

【问题标题】：How can I bind a onclick event to a checkbox INSTEAD of a change event?如何将 onclick 事件绑定到更改事件的复选框 INSTEAD？
【发布时间】：2016-10-28 19:20:09
【问题描述】：

这是我遇到的问题。

我正在为某些设备制作控制面板。现在用户可以启用/切换开/关开关（复选框），远程设备也可以。这反映在数据库中。但是，每当用户（不是设备）切换以启用设备（复选框 == 选中）时，我也想要一个确认框。当用户禁用（关闭，复选框==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(){}) 事件时，没有任何反应。我认为它不适用于复选框？我做错了什么？

【问题讨论】：

标签： javascript jquery checkbox

【解决方案1】：

你在另一个事件中绑定一个事件..

$('#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"
            });
        }
    }

【讨论】：

【解决方案2】：

是的，它适用于复选框。

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

<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 行或警报以查看代码失败的位置。

【讨论】：