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イベントを使用してみてください。削除する; alert()呼び出し; 'X'と `$のy1`が定義されてい.toggleClass()

/* 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>