jquery-mobile - 在有人点击的任何地方创建图像 - .append 结合 pageX 和 Pagey

Question

我正在尝试在智能手机（iOS 和 Android）上创建交互，在有人点击屏幕的任何地方创建图像。使用 jQuery Mobile，这是我现在拥有的 js：

$('#container1').bind('tap', function(e) {
 $('img').css({
  position: 'absolute',
  left:  e.pageX,
  top: e.pageY
 });
 $("#container1").append('<img  src="image.png" />');
});

然而，这会创建图像的一个实例，并在用户点击的任何地方将它们堆叠起来。如何结合这两个代码块来创建同一图像的唯一实例，只要有人用唯一的 X 和 Y 位置点击？谢谢！

Answer 1

你的代码

$('img').css({
    position: 'absolute',
    left:  e.pageX,
    top: e.pageY
});

正在改变页面上所有 img标签的位置。您可能需要手动设置您添加的图像的样式属性：

$('#container1').bind('tap', function(e) {
    var image = '<img src="image.png" style="position:absolute;left:' + e.pageX +
        ';top:' + e.pageY';" />';
    $("#container1").append(image);
}