1

我正在制作一个游戏，其中我有一个“玩家”，玩家是一个data附加了 jquery 的图像，我可以访问data当我命名时，img $playerSprite 即使使用 id（而不是$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);

但是，当我将“播放器”创建为 aimg时div，我可以使用它来访问img，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);

如果我点击img它警报“成功”然后我得到Uncaught TypeError: Cannot read property 'level' of undefined fiddle.jshell.net/6Erj5/3/show/:40

摆弄和摆弄问题

4

2 回答 2

2

这是因为您在页面上创建了两个具有相同 ID #test 的元素。第一个是静态 div，然后您要向其中添加一个子 img，其 id 也是 test。无效的 html，jQuery 只会找到第一个测试（div）并且您没有将数据添加到 div。改变图片的id，或者获取div的子img eg

$('#test').find('img').data('model')
于 2013-09-09T22:49:52.827 回答
0

问题是在这个事件处理程序中：

$("#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);
});
于 2013-09-09T22:56:39.763 回答