通过JavaScript/JQuery/Bootstrap将ClickEvent附加到按钮

我正在做一个小游戏，包括蓝精灵和毒蕈。 我已经做到了。[无法进行直接映像：/Reputation=6]

白色/红色和白色/蓝色圆圈中的每一个都是其各自分区中的一个按钮。我现在不想做的是在每个按钮上“附加”一个clickEvent处理程序，这样每当按下按钮时，图像就会切换为空白或红色和白色

按钮的创建代码如下所示：

    var circle = document.createElement('button');
    column.appendChild(circle);

每个按钮都有自己的ID

那么，有没有简单易行的方法让每个按钮响应上面提到的点击

---

我以后需要的数据最重要的是单击按钮的ID。因为它的id引用了它所属的行和列。

因为您使用的是jQuery，所以我会这样做：

var circle = document.createElement('button');
circle.className = "nameOfTheClass";
column.appendChild(circle);

然后，jQuery绑定类名称的每个对象上的单击事件：

$('.nameOfTheClass').click(function(){
     alert( $(this).attr('id') );
});

---

PS：您也可以使用jquery创建dom元素，但因为您只询问如何绑定它。

通过将单击事件添加到按钮的父级而不是每个按钮，您可以更轻松地执行此操作，如下所示：

column.addEventListener("click",function(event){
    var target=event.target,id=target.id;
    if(target.nodeName.toLowerCase()=="button"){
        // do stuff ...
    }
},0);

---

这样，您就不必担心以后在脚本中添加到

列
元素的按钮。
可以使用
addEventListener（）
方法通过javascript将事件触发函数附加到元素上。

所述方法的语法如下：

element.addEventListener(event, function, useCapture);

例如，在您的情况下：

circle.addEventListener("click", myFunction);

上面的代码显然需要预先定义函数
myFunction（）
，但是，函数也可以在方法本身中定义：

circle.addEventListener("click", function(){
    //your function
});

您可以了解有关此方法的更多信息。
如果您尝试纯
javascript
使用

circle.addEventListener("click", function(){
    /* your code here */
});

或者，如果您打算使用
Jquery
，则使用

$('button').on('click', function(){
 /*your code here*/ 
});

注意：这将应用于页面的所有按钮。如果要将其用于特定按钮，则可以使用
id
或
类

希望这能有所帮助。
如果您只是尝试纯javascript，可以使用circle.addEventListener，如果您想使用jquery，则可以使用$（'button'）。on（'click'，function（）{/*此处的代码*/}）@Sushil我可以通过两种方式检索单击按钮的id，对吗？如果是这样的话，THX:D+（每个按钮都有一个单独的id）@Sushil经过测试，我得到了一个包含按钮id的mouseEvent！那就让我把这个作为解决办法。请接受它作为回答@MrKickkiller