使用jQuery在图像上绘制坐标

Question

我有动态显示的图像。对于此图像，我具有已经存储在数据库中的坐标值。现在，我要使用此坐标值在图像上进行标记。
这是我的jquery代码，

$(document).ready(function () {
$.ajax({
           type: "POST",
           url: "Section.aspx/GetImageData",
           //data: '',
            data: JSON.stringify({ "dataSecName": name }),
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (data) {
                   alert("Success");
                   var imgval = JSON.parse(data.d);
                   $.each(imgval, function (i, jsondata) {
                   $("#imgDiv").empty();
                     //console.log(jsondata.ImageName);
                    console.log(jsondata.XCordinate);
                    console.log(jsondata.YCordinate);
                    var img = $('<img id="dynamic">'); //Equivalent: $(document.createElement('img'))
                    img.attr('src', "../Administration/imageHotspot/" + jsondata.ImageName);
                    img.appendTo('#imgDiv');
                    $("#dynamic").height(500);
                    $("#dynamic").width(500);
   });
});

此处图像成功显示。现在我想在此图像上使用此坐标值图。 我已经编写了要绘制的代码，但是没有任何效果

  $.each(imgval, function (i, jsondata) {
                            //$("body").append(
                            $("#dynamic").append(
                                  $('<div></div>').css({
                                    position: 'absolute',
                                      top: jsondata.YCordinate + 'px',
                                      left: jsondata.XCordinate + 'px',
                                    //top: event.pageY + 'px',
                                    //left: event.pageX + 'px',
                                    width: '10px',
                                    height: '10px',
                                    background: '#dd4b39',
                                    'border-radius': '10px'
                                })
                            );

                        });