Question

我有一个角色对象的对象，用于存储它们的名称，属性，图像源等。然后，我为每个角色动态创建按钮，并将ID设置为其名称。当一个角色被选中（点击）时，它会将该角色指定为游戏的玩家，然后为每个其他角色创建一个按钮作为敌人。这有效并且基本上设置了游戏。

$(".character-box").on("click", function(){
$("#charactercontainer").attr("style","visibility:hidden");
var selector = $(this).attr("id");
var enemyCount = 1;
for (var i=1; i<5; i++){
    if (selector == spriteObject["sprite"+i].name){
        player = spriteObject["sprite"+i];
    }
    else{
        enemies["enemy"+ enemyCount] = spriteObject["sprite"+i];
        enemyCount ++;
    }
}
var myPlayer = $("<img>");
myPlayer.attr("src", player.imgsrc);
myPlayer.addClass("flipped gameSprite");
$("#playerbox").append(myPlayer);
for(var j = 1; j<4; j++){
    var myEnemy = $("<button>");
    var enemyimage = $("<img>");
    var enemyName = enemies["enemy"+j].name;
    var enemyImgSrc = enemies["enemy"+j].imgsrc;
    myEnemy.attr("id",(enemyName+"BAD"));
    myEnemy.addClass("character-box enemyplayer");
    enemyimage.attr("src", enemyImgSrc);
    enemyimage.addClass("gameSprite")
    $("#enemybox").append(myEnemy);
    $("#"+enemyName+"BAD").append(enemyimage);

};
$(".gameSprite").animate({ height: "100px", width: "100px" });
});

现在我想为这些“敌人”按钮添加功能，并有一个警告来测试代码，但点击事件似乎没有绑定到按钮。

// when a enemy is selected to attack create gameply
$(".enemyplayer").on("click", function(){
alert("lets fight");
});

Answer 1

创建按钮后添加偶数监听器，如下所示：

var myEnemy = $("<button>");
var enemyimage = $("<img>");
var enemyName = enemies["enemy"+j].name;
var enemyImgSrc = enemies["enemy"+j].imgsrc;
myEnemy.attr("id",(enemyName+"BAD"));
myEnemy.addClass("character-box enemyplayer");
enemyimage.attr("src", enemyImgSrc);
enemyimage.addClass("gameSprite")
$("#enemybox").append(myEnemy);
$("#"+enemyName+"BAD").append(enemyimage);

// add here
$(".enemyplayer").on("click", function(){
  alert("lets fight");
});

Answer 2

还有另一种解决click事件问题的方法，只需使用自己的函数扩展jQuery。

myEnemy.attr('onClick', '$.fn.ClickMe()');

$.fn.ClickMe = function () {
    alert('You clicked me !!!'); 
}

我认为，这是最简单的处理方式，而不是类授权，因为将来如果有人决定改变课程，那么它会影响整个课程。

Answer 3

您可以委派

$(document).on("click", ".enemyplayer", function(){
    alert("lets fight");
});

将click事件分配给动态创建的按钮

3 个答案: