jQuery的获得元素的ID包含分区

Question

内我有一个div内的一些按钮，像这样：

<div id="buttons"> 
    <button id="addRed" class="addTriangle">Add red</button> 
    <button id="addGreen" class="addTriangle">Add green</button> 
    <button id="addBlue" class="addTriangle">Add blue</button> 
    <button id="addPurple" class="addTriangle">Add purple</button> 
</div><!--buttons--> 

而非写为每个按钮的处理程序，我想只写创建新的元素一个功能根据其ID。

如果我用这个：

$("#buttons").click(function(){ 
    var id = $(this).attr('id'); 
    alert(id); 
}); 

我得到父母的ID，但我如何才能被点击的特定按钮的id？

Answer 1

您可以单击事件处理程序附加到实际的按钮，如：

$("#buttons > button").click(function(){ 
    alert(this.id); 
}); 

或使用类名称，如：

$(".addTriangle").click(function(){ 
    alert(this.id); 
}); 

Answer 2

使用类单击事件

$(".addTriangle").click(function(){ 
 
    var id = $(this).attr('id'); 
 
    alert(id); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 

 
<div id="buttons"> 
 
    <button id="addRed" class="addTriangle">Add red</button> 
 
    <button id="addGreen" class="addTriangle">Add green</button> 
 
    <button id="addBlue" class="addTriangle">Add blue</button> 
 
    <button id="addPurple" class="addTriangle">Add purple</button> 
 
</div><!--buttons-->