在 SVG 元素上动态添加 onclick答案

【问题标题】：Dynamically adding onclick on SVG elements在 SVG 元素上动态添加 onclick
【发布时间】：2018-08-05 14:17:42
【问题描述】：

我正在 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");

我怎样才能让它工作？谢谢！

【问题讨论】：

stackoverflow.com/questions/16472224/…的可能重复

标签： javascript svg onclick dynamically-generated

【解决方案1】：

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

这应该是

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

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

这应该是

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

但是，这些天来，这样做的正常方法如下：

newCircle.addEventListener("click", myFunction);

【讨论】：

【解决方案2】：

试试这个

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

【讨论】：