#5979 closed bug (wontfix)

Opened August 21, 2010 05:16AM UTC

Closed October 15, 2012 08:39PM UTC

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

Reported by: jfhernandeze Owned by:
Priority: minor Milestone: 1.11.0
Component: ui.button Version: 1.8.1
Keywords: button, ie, image Cc:
Blocked by: Blocking:
Description

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.

Attachments (0)
Change History (5)

Changed September 06, 2011 02:04AM UTC by JamesKhoury comment:1

_comment0: \ \ Seems to work in IE8: [http://jsfiddle.net/Ch78s/2/] \ \ (stripped down jsfiddle: [http://jsfiddle.net/Ch78s/3/]) → 1315275153066119
_comment1: EDIT: \ \ [http://jsfiddle.net/nJwbh/2/] shows the problem here → 1315277670514420

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();
     });
   }

Changed February 27, 2012 01:49PM UTC by jzaefferer comment:2

status: new → open

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

Changed March 20, 2012 01:47PM UTC by rcollette comment:3

_comment0: 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/ \ → 1343662134940968

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/

Changed October 11, 2012 09:04PM UTC by scottgonzalez comment:4

milestone: TBD → 1.11.0

Changed October 15, 2012 08:39PM UTC by dalekocian comment:5

resolution: → wontfix
status: open → closed

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.