Question

enter code here我的jQuery点击功能不起作用。以下是我在点击id“技能”时尝试运行的脚本。如果我不将整个函数包装在$(document).ready and $("#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

其他可能性，但很可能是两件事之一（或两者兼而有之）阻止了这一点。

您有多个ID为#skills的元素，实际上应该是一个类而不是ID
#skills无法用于jQuery，因此您可以尝试通过将$('#skills').click(function() { ... })替换为$(document).on('click', '#skills', function() { ... });

Visualize the madness

Answer 2

而不是

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

你需要

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

我的jQuery点击功能不起作用

2 个答案:

Visualize the madness