在 SVG 元素上動態添加 onclick

Question

我正在 svg 中動態創建一些圓圈，我想為所有圓圈添加一個onlick功能。 我知道可以這樣做： <rect class="btn" x="0" y="0" width="10" height="10" onclick="alert('click!')" /> ，但我正在創建這樣的元素：

            newCircle.setAttribute("class","circle");                                              
            newCircle.setAttribute("cx",centerX);                                                  
            newCircle.setAttribute("cy","850");                                                    
            newCircle.setAttribute("r","150");                                                     
            newCircle.style.stroke = "black";                                                      
            newCircle.style.strokeWidth = "2px";                                                   
            newCircle.style.opacity = circleOpacity[i-1];                                          
            newCircle.style.fill = circleColour[i];
            svgNode.appendChild(newCircle);

我嘗試添加這個，

$(".circle").click(function() {
          onclick= "alert('click!')";

        })

但它不起作用。

我也嘗試過這樣的事情： newCircle.setAttribute("onclick","myFunction");

我怎樣才能讓它工作？ 謝謝！

Answer 1

$(".circle").click(function() { onclick= "alert('click!')"; })

這應該是

$(".circle").click(function() {
    alert('click!');
})

 newCircle.setAttribute("onclick","myFunction");

這應該是

newCircle.setAttribute("onclick","myFunction()");

但是，如今，執行此操作的正常方法如下：

newCircle.addEventListener("click", myFunction);

Answer 2

嘗試這個

jQuery('body').on('click','.circle',function(){
 alert('clicked')
})