JQuery ID des Elements innerhalb von Div enthält

Question

Ich habe einige Tasten in einem div wie so:

<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--> 

und nicht für jede Taste einen Handler schreiben, möchte ich eine Funktion nur schreiben, die ein neues Element erstellt basierend auf seiner ID.

Wenn ich diese verwenden:

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

ich die ID des Eltern bekommen, aber wie bekomme ich die ID des jeweiligen Schaltfläche, auf die geklickt wurde?

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

oder mit dem Klassennamen wie:

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

Answer 1

Sie können die Click-Ereignishandler tatsächlichen Tasten wie anhängen

Answer 2

Verwenden Sie die Klasse Click-Ereignis

$(".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-->