Question

I have the following HTML code

    <div id="id0_0" class="clearfix" style="margin-left:40px">
       <div id="id0_1" class="choice">
          <span id="spanradio_1" class="radio"> </span>
          <span id="spanlabel_1" class="label"><label id="label_1">Indoor</label></span>
       </div>

       <div id="id0_2" class="choice">
          <span id="spanradio_2" class="radio"> </span>
          <span id="spanlabel_2" class="label"><label id="label_2">Outdoor</label></span>
       </div>
    </div>

with the following jQuery:

    jQuery('.choice').click( function(e) {
       alert('clicked!! ' + e.target.id);
       var src_ele = $(e.target);

       e.stopPropagation();
       return false;
    });

However, my click is triggering on the spanradio’s & label’s and not the div’s. Any reason what is causing this?

Thanks!

Answer 1

Basically:

• this is the element you bound the event to (i.e. one of the elements in the set that you called .on on)
• e.target is the deepest element you clicked on

So you want this.id.