Question

我正在制作一个游戏，其中我有一个“玩家”，玩家是附加了jquery data的图像，当我命名为{{1}时，我能够访问data } img 即使使用id （而不是$playerSprite），也是如此

$playerSprite

但是，当我在function Player() { this.inFight = false; } player = new Player(); $playerSprite = $("<img>", { "id":"test", "src": "http://3.bp.blogspot.com/-kAhN0HX-MBk/T_5bApfhbJI/AAAAAAAAAuI/lUww8xT9yV8/s1600/smileys_001_01.png", }).data("model", player); $("div").append($playerSprite); alert($("#test").data("model").inFight);中将“播放器”创建为img时，我可以使用div访问img，但我无法访问{{1} }} 用它。使用以下代码

id

如果我点击data它会提醒“成功”，然后我会function Player() { this.level = 1; } function Game() { var player = new Player(); $("div").html($("<img>", { "class": "onTop displayCurrentHealth", "src": "http://3.bp.blogspot.com/-kAhN0HX-MBk/T_5bApfhbJI/AAAAAAAAAuI/lUww8xT9yV8/s1600/smileys_001_01.png", "alt": "you", "id": "test" }).data("model", player) ); } Game(); $("#test").click(function(){alert("success");}); $("#test").click(function(){alert($(this).data("model").level);}); alert($("#test").data("model").level);

working fiddle和fiddle with issue

Answer 1

这是因为您在页面上创建了两个具有相同ID的元素#test。第一个是静态div，然后你要添加一个子img给它，id也是test。无效的html，jQuery只会找到第一个测试（div）而你没有将数据添加到div中。更改图像的ID，或获取div的子img，例如

$('#test').find('img').data('model')

Answer 2

问题在于此事件处理程序：

$("#test").click(function () {
    alert($(this).data("model").level);
});

this表示#test没有任何数据设置如果你改变它，它应该工作：

$("img").click(function () {
    alert($(this).data("model").level);
});

关于动态添加元素的问题：请阅读javascript中的事件委托。快速举例：

$(existingParentElement).on('eventType', 'dynamicElement', eventHandler);

在你的情况下：

$('#test').on('click', 'img', function () {
    alert($(this).data("model").level);
});

如何使用动态添加元素的jquery .data

2 个答案: