$().button() with an image inside not working in IE7/8

[jfhernandeze]

I have a checkbox with a label inside and a img inside the label:

<input type="radio" id="myid" value="someval" /> <label for="myid">

<img src="img/url/image.png" />

</label>

$("#myid").button();

The UI works fine (paints it properly and handle visual effects) but when you click on the img that is inside the label, IE changes the UI well but it doesn't change the radio property as checked nor the value. If you click on the button background (generated by UI) it works fine (UI paints fine, and the value of the radio changes).

In other browsers works fine.

[JamesKhoury]

EDIT:

​http://jsfiddle.net/nJwbh/2/ shows the problem here

Solution: ​https://github.com/JamesKhoury/jquery-ui/commit/8f3df6402c26a75fd9716325d803e2959a2070d6

in ui.button._create:

  if(toggleButton){
     //... *snip*
     this.buttonElement.find("img").click(function()
     {
         self.buttonElement.click();
     });
   }

[Jörn Zaefferer]

Need to figure out if that applies to all nested markup. If so, adding a workaround for just images isn't useful.

[rcollette]

As far as I can tell, this issue only pertains to images. Until someone else can identify other elements that are having issues inside a label, doing something to fix a noted issue is better than doing nothing about it, and the fix is quite easy to implement. Waiting this long for some other possible related issue to be noted is kind of like wondering if/when an alien is going to appear. Sorry for the sarcasm but honestly, a simple fix like this should not go unimplemented for so long.

​http://jsfiddle.net/rcollette/xSAgr/2/

Another fiddle in conjunction with knockoutjs ​http://jsfiddle.net/rcollette/KfEmG/

[dalekocian]

This is the browser's default way of handling labels in IE7 and IE8. If you comment out $("#myid").button(); on ​http://jsfiddle.net/nJwbh/2/ and click on the label it will not set the radio button.