如何將點擊事件添加到我在JavaScript中構建的按鈕中？

我有這樣的功能：如何將點擊事件添加到我在JavaScript中構建的按鈕中？

var ButtonChoice = function(key, type, img, label){ 
this.key = key; 
this.type = type; 
this.img = img; 
this.label = label; 
this.getButton = function(){ 
return "<img src='img/" + this.img + "' type='" + this.type + "' id='" + 
     this.key + "' class='ButtonsChoice' description='" + this.label + 
     "' />" 
}; 
};

，我需要點擊功能添加到該圖像。我的問題是如何做到這一點？

來源

2017-06-29 davidson94

首先將它添加到DOM，然後引用'Element'，您可以調用'element.addEventListener（'click'，function（）{// do something}）;' – Yoda

[Event binding在動態創建的元素？]（https://stackoverflow.com/questions/203198/event-binding-on-dynamically-created-elements） – Liam

-1

此事件偵聽器添加到document.ready()事件偵聽器：

$('.ButtonsChoice').click(function(e){ 
    ... do something ... 
});

當然，這把所有的按鈕，有一個班的同...

來源

2017-06-29 08:55:49

這可能無法正常工作。 'ButtonChoice'是一個函數*，這意味着它將在文檔準備就緒後調用。所以你需要事件委派。 –

這不會工作，因爲按鈕是動態創建的，您需要使用和事件代理 – Liam

只需添加的onclick功能，以您的返回值：

return "<img src='img/" + this.img + "' type='" + this.type + "' id='" + 
     this.key + "' class='ButtonsChoice' description='" + this.label + 
     "' onclick='yourFunc();' />"

來源

2017-06-29 08:58:48 kleinohad

雖然這可行，但它是非常古老的學校，並且通常建議您不要使用'onclick =' –

-1

你能做到這樣，

<img src="example.gif" onclick="a('hello')">

在img標籤內的上述行

添加一個onclick事件將調用一個函數一（值）

來源

2017-06-29 09:02:01

* sigh *每個人都可以請閱讀該死的問題.... – Liam

不是作爲一個HTML字符串創建圖像的你可以創建它使用JavaScript動態，這將允許您使用onclick動態附加click事件。

這是應該的代碼：

var ButtonChoice = function(key, type, img, label) { 
    this.key = key; 
    this.type = type; 
    this.img = img; 
    this.label = label; 
    this.getButton = function() { 
    var image = document.createElement("img"); 
    image.src = "img/" + this.img; 
    image.type = this.type; 
    image.id = this.key; 
    image.className = "ButtonsChoice"; 
    image.description = this.label; 
    image.onclick = function(){ 
     //Put your code here 
    } 
    return image; 
    }; 
};

注：

我不明白你爲什麼要使用你的圖像type屬性，type屬性通常與投入使用和按鈕，請查看MDN HTML attribute reference表以瞭解更多詳情。

來源

2017-06-29 09:03:09

感謝上帝給出了一個明智的答案.... – Liam

Hhhhh @Liam是這是最基本和合理的方式來做到這一點。 –

回答

相關問題