Jquery mobile 在任何有人点击的地方创建一个图像-。附加与pageX和Pagey组合

我正在尝试在smartpphones（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" />');
});

$（'#container1'）.bind（'tap'，函数（e）{
$（'img'）.css({
位置：'绝对'，
左：e.pageX，
顶部：e.pageY
});
$（“#容器1”）。附加（“”）；
});

但是，这会创建一个图像实例，并在用户点击的任何位置将其堆叠。我如何将这两段代码组合在一起，以便在有人使用唯一的X和Y位置点击的地方创建同一图像的唯一实例？谢谢

您的代码

$('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);
}

$（'#container1'）.bind（'tap'，函数（e）{
var图像=“”；
$（“#container1”）。追加（图像）；
}

当然，它会将所有图像堆叠在当前位置，因为您使用的是非常基本的选择器“img”，这意味着文档中当前的所有图像。您可以直接在图像上设置样式，方法是在用于附加图像的HTML代码中直接为图像赋予一个

style

属性。因此，我会执行以下操作：$（“#container1”）.append（“”）；@user1922019我添加了一个答案。你在pageX和pageY之后忘记了

px

。这似乎不起作用，但我可能做错了什么：

$（document）.ready（function（）{$（'#container1'）.bind（'tap'，function（e）{var image=''；$（“#container1”）.append（image）}）；

@Alejo它似乎是style=“position:absolute；left:”+e.pageX+”；top:“+e.pageY”；导致它崩溃的原因。当我删除它时，它是有效的。但是它并没有给每个img一个唯一有效的位置！你能把它添加为一个答案，这样我就可以检查它了吗？如果你有时间的话，我也想知道为什么它有效