javascript - 我的 jQuery 点击功能不工作

Question

在此处输入代码我的 jQuery 点击功能不工作。以下是我在单击 id“技能”时尝试运行的脚本。如果我不将整个函数包装在 $(document).ready 和 $("#skills").click 中，那么该函数会在文档加载时正常运行

$(document).on('click', 'skills', function() { 


var gaugeConfig = { "canvasHolderId": "HTML", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#2ECC71", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "7.5"}
var gaugeConfig1 = { "canvasHolderId": "CSS", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#2ECC71", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "6.5"}
var gaugeConfig2 = { "canvasHolderId": "JS", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#27AE60", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "7"}
var gaugeConfig3 = { "canvasHolderId": "JQ", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#F1C40F", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "7"}
var gaugeConfig4 = { "canvasHolderId": "BT", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#F1C40F", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "8"}
var gaugeConfig5 = { "canvasHolderId": "XML", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#F39C12", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "7.5"}
var gaugeConfig6 = { "canvasHolderId": "JAVA", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#E67E22", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "9"}
var gaugeConfig7 = { "canvasHolderId": "MVC", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#E67E22", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "8.5"}
var gaugeConfig8 = { "canvasHolderId": "SP", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#D35400", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "6.5"}
var gaugeConfig9 = { "canvasHolderId": "WB", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#E74C3C", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "7"}
var gaugeConfig10 = { "canvasHolderId": "SQL", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#E74C3C", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "8"}
var gaugeConfig11 = { "canvasHolderId": "HB", "width": "150", "height": "150", "circleColor": "#222", "arcColor": "#C0392B", "canvasFillColor": "#333", "textPosition": "inside" , "skillLevel" : "6.5"}

            function drawGauge(gc) {

                var W = gc.width;
                var H = gc.height;
                var degrees = 0;
                var new_degrees = 0;
                var difference = 0;
                var color = gc.arcColor;
                var bgcolor = gc.circleColor;
                var text = gc.skillLevel;
                var animation_loop, redraw_loop;
                var me = this;
                var canvasHolder = document.getElementById(gc.canvasHolderId);
                var canvasCreator = document.createElement("canvas");

                canvasCreator.id = _randomId();
                canvasCreator.width = gc.width;
                canvasCreator.height = gc.height;
                canvasHolder.appendChild(canvasCreator);
                var canvas = document.getElementById(canvasCreator.id);


                function _randomId() {
                    var d = new Date();
                    return "canvas" + d.getFullYear() + "" + d.getMonth() + "" + d.getDay() + "" + d.getHours() + "" + d.getSeconds() + "" + d.getMilliseconds()*Math.random();
                }

                function _init() {                        

                    ctx = canvas.getContext("2d");                        
                    ctx.clearRect(0, 0, W, H);    

                    ctx.beginPath();
                    ctx.strokeStyle = bgcolor;
                    ctx.lineWidth = 15;
                    ctx.arc(W / 2, H / 2, 50, 0, Math.PI * 2, false); //you can see the arc now
                    ctx.stroke();

                    var radians = degrees * Math.PI / 180;
                    ctx.beginPath();
                    ctx.strokeStyle = color;
                    ctx.lineWidth = 15;
                    ctx.arc(W / 2, H / 2, 50, 0 - 90 * Math.PI / 180, radians - 90 * Math.PI / 180, false);

                    ctx.stroke();


                    ctx.fillStyle = color;
                    ctx.font = "30px bebas";
                    text_width = ctx.measureText(text).width;
                    ctx.fillText(text, W / 2 - text_width / 2, H / 2 + 12);
                }

                function _animate_to() {                        
                    if (degrees == new_degrees)
                        clearInterval(animation_loop);    
                    if (degrees < new_degrees)
                        degrees++;
                    else
                        degrees--;    
                    _init();
                }

                function _draw() {

                    if (typeof animation_loop != undefined) clearInterval(animation_loop);

                    new_degrees = Math.round((text * 3600)/100);
                    difference = new_degrees - degrees;

                    animation_loop = setInterval(function () { _animate_to() }, 1000 / difference);

                }

                _draw();
            }

           new drawGauge(gaugeConfig);
           new drawGauge(gaugeConfig1);
           new drawGauge(gaugeConfig2);
           new drawGauge(gaugeConfig3);
           new drawGauge(gaugeConfig4);
           new drawGauge(gaugeConfig5);
           new drawGauge(gaugeConfig6);
           new drawGauge(gaugeConfig7);
           new drawGauge(gaugeConfig8);
           new drawGauge(gaugeConfig9);
           new drawGauge(gaugeConfig10);
           new drawGauge(gaugeConfig11);
  });

HTML:

<div id="HTML" class="skills"></div>
<div id="CSS" class="skills"></div>
<div id="JS" class="skills"></div>
<div id="JQ" class="skills"></div>
<div id="BT" class="skills"></div>
<div id="XML" class="skills"></div>
<div id="JAVA" class="skills"></div>
<div id="MVC" class="skills"></div>
<div id="SP" class="skills"></div>
<div id="WB" class="skills"></div>
<div id="SQL" class="skills"></div>
<div id="HB" class="skills"></div>

Answer 1

其他可能性，但很可能是两件事之一(或两者的结合)阻止了这种情况。

1. 您有多个 ID 为 #skills 的元素，它们实际上应该是一个类而不是 ID
2. #skills 在加载时对 jQuery 不可用，因此您可以尝试通过替换 $('#skills').click(function() { ... }) 来修复该问题 与 $(document).on('click', '#skills', function() { ... });

Visualize the madness