title: Clickable img wrapped in label not working in IE8
body: <p>I have the following markup and Javascript:</p>
  
  <p><strong><a href="http://jsfiddle.net/chridam/ft4Hb/" rel="nofollow">JSFiddle</a></strong></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;form method="get" action="some-url-here"&gt;
   &lt;div class="UserFilter"&gt;
    &lt;ul class="UserFilter"&gt;
     &lt;li&gt;
        &lt;label class="Selected" for="1"&gt;
            &lt;input id="1" type="radio" value="1" name="Profile" /&gt;
            &lt;img title="User 1" alt="User 1" src="img-url-here" style="width: 50px;height: 50px" /&gt;
            User 1
        &lt;/label&gt;
     &lt;/li&gt;
     &lt;li&gt;
        &lt;label class="Selected" for="2"&gt;
            &lt;input id="2" type="radio" value="2" name="Profile" /&gt;
            &lt;img title="User 2" alt="User 2" src="img-url-here" style="width: 50px;height: 50px" /&gt;
            User 2
        &lt;/label&gt;
     &lt;/li&gt;
    &lt;/ul&gt;
   &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>var labelID;
  $("label img").live("click", function() {
          labelID = $(this).parent().attr('for');
          $('#'+labelID).trigger('click');        
  });
  
  $('ul.UserFilter input').click(function () {
          $('ul.UserFilter input:not(:checked)').parent().removeClass("Selected");
          $('ul.UserFilter input:checked').parent().addClass("Selected");
          //$(this).closest("form").submit();     
  });
  
  $('input:checked').parent().addClass("Selected");
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>div.UserFilter {
      background: none repeat scroll 0 0 #EAE5DA;
      border-bottom: 1px solid #F1EEE6;
      border-top: 3px solid #0888A5;
      box-shadow: 0 5px 10px #F1F1F1;
  }
  div.UserFilter ul {
      display: inline-block;
  }
  ol, ul {
      list-style: none outside none;
  }
  div.UserFilter ul li label.Selected {
      background: none repeat scroll 0 0 #0888A5;
      border: 1px solid #16758B;
      color: #FFFFFF;
      text-shadow: 0 1px 0 #16758B;
  }
  div.UserFilter ul li label.Selected {
      background: none repeat scroll 0 0 #688ABD;
      border: 1px solid #688ABD;
      color: #FFFFFF;
      cursor: pointer;
      text-shadow: 0 1px 0 #52688A;
      transition: border-color 0.218s ease 0s;
  }
  div.UserFilter ul li label {
      background: none repeat scroll 0 0 #FFFFFF;
      border: 1px solid #CCCCCC;
      border-radius: 2px 2px 2px 2px;
      display: inline-block;
      letter-spacing: normal;
      padding: 0 5.666px 0 0;
      transition: background 0.218s ease 0s;
      word-spacing: normal;
  }
  </code></pre>
  
  <p>Clicking on the text works just fine in selecting the radio button associated with it (tested in Firefox, Chrome and IE9+). However, in IE8-, clicking the image does not select or fire the click event of the radio button. Any ideas, workaround solutions, or suggestions are most welcomed.</p>