Opened 9 years ago

Closed 7 years ago

#5979 closed bug (wontfix)

$().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.

Change History (5)

comment:1 Changed 8 years ago by 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();
     });
   }
Last edited 8 years ago by JamesKhoury (previous) (diff)

comment:2 Changed 8 years ago by Jörn Zaefferer

Status: newopen

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

comment:3 Changed 8 years ago by 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/

Last edited 7 years ago by rcollette (previous) (diff)

comment:4 Changed 7 years ago by Scott González

Milestone: TBD1.11.0

comment:5 Changed 7 years ago by dalekocian

Resolution: wontfix
Status: openclosed

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.

Note: See TracTickets for help on using tickets.