title: JQuery: get object inside span
body: <p>I am very new to jQuery. Below is part of my code</p>
  
  <pre><code>&lt;div class = 'buttons'&gt;
      &lt;span&gt;
      &lt;input type='button' value='BUTTON1' id='button1'&gt;
      &lt;/span&gt;
      &lt;span&gt;
      &lt;input type='button' value='BUTTON2' id='button2'&gt;
      &lt;/span&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Using jquery, I would like to print the id of the button clicked. I tried the following:</p>
  
  <pre><code>$(".buttons &gt; span").click(function () {
      alert("YOU CLICKED" + this.id);
  });
  </code></pre>
  
  <p>But I think this is referring to the span object. This is weird because how come the span object has a click event? Or all jquery objects have "click"? 
  How do I get the id of the button in the span?</p>
  
  <p>Thank You.</p>