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

我有一个存储名称，属性，图像源等的字符对象的对象。然后，我为每个字符动态创建按钮，并为其设置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" }); 
});

现在我想将功能添加到这些“敌人”按钮，并有警报测试代码，但click事件似乎并没有绑定到按钮。

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

来源

2017-06-30 kevin santos

何时执行绑定代码？ – stybl

更改您的代码，如下所示： '$（document）.on（“click”，“。enemyplayer”，function（）{ alert（“lets fight”）; –

@HimanshuUpadhyay Thanks！另一个问题，如果你不介意我问：你能解释为什么.enemyplayer按钮的点击事件，即使它具有与.character-box按钮完全相同的语法吗？两个按钮都是动态创建的 –

-1

你可以代表

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

来源

2017-06-30 17:35:08

创建后按钮，这样添加甚至监听器：

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"); 
});

来源

2017-06-30 17:37:14 tech2017

也有另一种方式来解决与click事件的问题，只需使用您自己的函数来扩展jQuery。

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

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

我认为，应对，而不是一流的代表团，因为在将来如果有一个人决定更改类，那么它会影响整个东西，它的最简单的方法。

来源

2017-06-30 18:55:54 Ganesh

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

回答

相关问题