how to detect which button is clicked using jQuery

Question

how to detect which button is clicked using jQuery

<div id="dBlock">
 <div id="dCalc">
  <input id="firstNumber" type="text" maxlength="3" />
  <input id="secondNumber" type="text" maxlength="3" />
  <input id="btn1" type="button" value="Add" />
  <input id="btn2" type="button" value="Subtract" />
  <input id="btn3" type="button" value="Multiply" />
  <input id="btn4" type="button" value="Divide" />
 </div>
</div>

Note: above "dCalc" block is added dynamically...

Answer 1

$("input").click(function(e){
    var idClicked = e.target.id;
});

Answer 2

$(function() {
    $('input[type="button"]').click(function() { alert('You clicked button with ID:' + this.id); });
});

Answer 3

Since the block is added dynamically you could try:

jQuery( document).delegate( "#dCalc input[type='button']", "click",
    function(e){
    var inputId = this.id;
    console.log( inputId );
    }
);

demo http://jsfiddle.net/yDNWc/

Answer 4

jQuery can be bound to an individual input/button, or to all of the buttons in your form. Once a button is clicked, it will return the object of that button clicked. From there you can check attributes such as value...

$('#dCalc input[type="button"]').click(function(e) {
    // 'this' Returns the button clicked:
    // <input id="btn1" type="button" value="Add">
    // You can bling this to get the jQuery object of the button clicked
    // e.g.: $(this).attr('id'); to get the ID: #btn1
    console.log(this);

    // Returns the click event object of the button clicked.
    console.log(e);
});