將點擊事件分配給動態創建的按鈕

我有一個存儲名稱，屬性，圖像源等的字符對象的對象。然後，我爲每個字符動態創建按鈕，併爲其設置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

將點擊事件分配給動態創建的按鈕

回答

相關問題