我似乎無法通過swisnl在jQuery ContextMenu上獲取單選按鈕組單擊事件

Question

我正在嘗試使用ContextMenu庫，該庫不僅提供簡單的上下文菜單，還提供諸如單選按鈕，輸入文本，textareas等的輸入。

事情是，在做了一些測試示例之后，我無法在單選按鈕組上添加click事件，這很奇怪，因為看起來click事件適用於其他輸入，甚至是“ keyup”事件，但適用於radio按鈕不是。

這是庫，此鏈接上的示例包含單選按鈕：

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 "callback" : function() ……但是沒有用。 似乎丟失了。 每當修改該設置后，我都希望能夠執行某些操作。

謝謝。

Answer 1

無需將事件綁定到document 。 在同一演示頁上可以看到，將事件綁定到自定義輸入的方法如下：

 $.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> 

同樣在這個小提琴上 。

只是有時候我們看不到樹木所用的木頭。

Answer 2

根據文檔（ jQuery contextMenu Events ），可能的解決方案是：

 $(function () { $.contextMenu({ selector: '.context-menu-one', items: { "Settings": { name: "Settings" }, "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" } } }); $(document).on("change", ".context-menu-item", function (e) { alert("Item Clicked: " + $(this).text()); }); }); 

 <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>