javascript - 我似乎无法找到一种方法来获取 swisnl 的 jQuery ContextMenu 上的单选按钮组单击事件

Question

我正在尝试使用 ContextMenu 库，它不仅提供简单的上下文菜单，还提供单选按钮、输入文本、文本区域等输入。

事情是，在做了一些测试示例之后，我无法在单选按钮组上添加单击事件，这很奇怪，因为看起来单击事件适用于其他输入，甚至是“keyup”事件，但单选按钮则不然。

这是库，此链接上的示例包含单选按钮:

https://swisnl.github.io/jQuery-contextMenu/demo/input.html

这是我的小例子:

items: {
            "settings": {
                "name": "Settings",
                "items" : {
                    "auto" : {
                        "name" : "Auto",
                        "type" : "radio",
                        "radio" : "radioGroup",
                        "value" : "auto"
                    },
                    "on" : {
                        "name" : "On",
                        "type" : "radio",
                        "radio" : "radioGroup",
                        "value" : "on"
                    },
                    "off" : {
                        "name" : "Off",
                        "type" : "radio",
                        "radio" : "radioGroup",
                        "value" : "off"
                    }
                },
                "events" : {
                    "click" : function(e) {
                        console.log(e);
                    }
                }
            },

我尝试了其他事件，例如“change”，或者也不是添加“callback”:function()来代替“events”...但没有成功。好像不见了。我希望能够在修改该设置时执行某些操作。

谢谢。

Answer 1

无需将事件绑定(bind)到文档。正如您在 same demo page 上看到的那样，将事件绑定(bind)到自定义输入的方式如下:

$.contextMenu({
    selector: '.context-menu-one',
    callback: function(key, options) {
        var m = "global: " + key;
        window.console && console.log(m) || alert(m);
    },
    items: {
        "auto": {
            "name": "Enabled",
            "type": "checkbox",
            events: {
                click: function(e) {
                    console.log('Clicked checkbox');
                }
            }
        },
        "on1": {
            "name": "On",
            "type": "radio",
            "radio": "radioGroup",
            "value": "on",
            events: {
                click: function(e) {
                    console.log('Clicked On');
                }
            }
        },
        "off1": {
            "name": "Off",
            "type": "radio",
            "radio": "radioGroup",
            "value": "off",
            events: {
                click: function(e) {
                    console.log('Clicked Off');
                }
            }
        }
    }
});

<link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/css/screen.css" type="text/css"/>
<link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/css/theme.css" type="text/css"/>
<link rel="stylesheet" href="https://swisnl.github.io/jQuery-contextMenu/css/theme-fixes.css" type="text/css"/>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/github.min.css">
<link href="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.css" rel="stylesheet" type="text/css"/>
<script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
<script src="https://swisnl.github.io/jQuery-contextMenu/dist/jquery.contextMenu.js" type="text/javascript"></script>



<span class="context-menu-one btn btn-neutral">right click me</span>

还有on this Fiddle .

只是有时候我们只见树木不见森林。