javascript - 注入(inject) SVG 元素并使用 jquery 访问它

Question

我正在图形内容类中动态创建 svg 元素(一个点)，并尝试使用 jquery 访问该点元素，但它不起作用。有溶胶吗？

 /* code for creating svg element */
 $(document).ready(function(){
    var x = 0,
    $y1 = 0;
    $con = $(".graphic-content");

    var $svg = $(svg("svg")).attr({
     "width": "946", "height": "280"
     }).appendTo($con);

   /* create a point */
      $(function() {
         $(svg("circle")).attr({
         "cx": x, "cy": $y1,"r":"3","class":"point"
          }).appendTo($svg);
  });
   /* hover effect*/
 $("circle").hover(function(){
   $(this).css("cursor", "pointer");
   alert("Hello!");
 });
});
function svg(elem) {
       return document.createElementNS("http://www.w3.org/2000/svg", elem);
    }

Answer 1

x 和 $y1 似乎没有定义？尝试使用附加到 svg 的 mouseenter、mouseleave 事件、事件委托(delegate)。删除 alert() 调用；使用 .toggleClass() 设置 cursor:point

/* code for creating svg element */
 $(document).ready(function() {
   var x = 0,
     $y1 = 0;
   $con = $(".graphic-content");

   var $svg = $(svg("svg")).attr({
     "width": "946",
     "height": "280"
   }).appendTo($con);

   /* create a point */
   $(function() {
     $(svg("circle")).attr({
       "cx": x,
       "cy": $y1,
       "r": "3",
       "class": "point"
     }).appendTo($svg);
   });
   /* hover effect*/
   $("svg").on("mouseenter", "circle", function(e) {
     console.log(e);
     $("body").toggleClass("hovered");
     // alert("Hello!");
   }).on("mouseleave", "circle", function(e) {
     console.log(e);
     $("body").toggleClass("hovered")
   })
 });

 function svg(elem) {
   return document.createElementNS("http://www.w3.org/2000/svg", elem);
 }

.hovered {
  cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="graphic-content"></div>