Skip to main content

Bug Tracker

Side navigation

#7594 closed bug (invalid)

Opened November 22, 2010 03:11PM UTC

Closed November 22, 2010 03:19PM UTC

Last modified March 14, 2012 07:49PM UTC

Html() is not outputting Checked attribute

Reported by: iainjmitchell@gmail.com Owned by:
Priority: low Milestone: 1.5
Component: manipulation Version: 1.4.4
Keywords: Cc:
Blocked by: Blocking:
Description

I'm not sure whether this is intended behaviour for some cross browser reason. But when you call .html() on an element that contains a checkbox with it's checked attribute set to true, the resulting html does not contain the checked setting.

See code example in link below:

http://jsfiddle.net/mNvYG/

I would have expected the second alert to display '<input type="checkbox" checked>'

Attachments (0)
Change History (9)

Changed November 22, 2010 03:19PM UTC by snover comment:1

resolution: → invalid
status: newclosed

Thanks for the report, but this is not a jQuery bug. The checked ''property'' is not the same as the checked ''attribute''. .attr sets the property value, which is not reflected in the DOM.

Changed November 22, 2010 03:25PM UTC by rwaldron comment:2

Duplicate #3879

Changed November 23, 2010 09:19AM UTC by iainjmitchell@gmail.com comment:3

Replying to [comment:1 snover]:

Thanks for the report, but this is not a jQuery bug. The checked ''property'' is not the same as the checked ''attribute''. .attr sets the property value, which is not reflected in the DOM.

Could you possibly provide a better explanation? I understand that when you set a property in jQuery it is not setting the attribute until it gets added to the DOM. However, when you call .html() on the jQuery all other attributes set through jQuery properties are included in the resulting html string. Should the html() call not reflect the current state of the element so that you can recreate it?

It also can cause inconsistencies between the jQuery properties and the outputted html. See this example I've put together (http://jsfiddle.net/3q2fm/).

Is there some particular reason why checked is treated in this way?

Thanks

Iain

Changed November 23, 2010 09:47PM UTC by snover comment:4

_comment0: jQuery’s `.attr` currently looks to see if a [http://www.w3.org/TR/DOM-Level-2-HTML/html.html DOM HTML] property exists on the object, and if it does will set that property instead of calling `setAttribute`. Very convenient and usually faster, but an occasionally undesired side-effect of this behaviour is that the [http://www.w3.org/TR/DOM-Level-2-Core/core.html#ID-84CF096 attributes] !NamedNodeMap is does not get updated when a DOM HTML property is changed. (For reference, `attributes` is the array-like structure that stores the actual attributes for an element that form its serialized representation.) I think that’s about as good an explanation as any.1290548854064964

jQuery’s .attr currently looks to see if a DOM HTML property exists on the object, and if it does will set that property instead of calling setAttribute. Very convenient and usually faster, but an occasionally undesired side-effect of this behaviour is that the attributes NamedNodeMap does not get updated when a DOM HTML property is changed. (For reference, attributes is the array-like structure that stores the actual attributes for an element that form its serialized representation.) I think that’s about as good an explanation as any.

Changed November 24, 2010 08:52AM UTC by iainjmitchell@gmail.com comment:5

Thanks for the response.

So in summary, for speed benefits in jQuery we can't always rely on .html() being an accurate representation of the object.

Changed November 25, 2010 07:40PM UTC by snover comment:6

The takeaway would be that the DOM HTML spec does not say that its interfaces should cause any modification to the portions of the Element object that are used for serialization, and indeed they do not.

This method’s behaviour will change significantly in 1.5 to stop doing this.

Changed April 19, 2011 06:30AM UTC by mnaoumov comment:7

I think we should consider of making 'checked' attribute for checkboxes as special cases.

Compare two approaches

var html = '<input type="checkbox" checked="checked">';

and

var html = $('<p>').append($('<input>', {type: 'checkbox', checked: 'checked'})).html()

I would prefer to use second approach because I think that string manipulation is not good enough :)

But because of this 'issue' I cannot achieve expected behavior.

Changed April 19, 2011 01:56PM UTC by timmywil comment:8

component: unfiledmanipulation
priority: undecidedlow

Replying to [comment:7 mnaoumov]:

I don't understand. You can do both of those. http://jsfiddle.net/timmywil/mNvYG/1/

Changed April 20, 2011 02:48AM UTC by mnaoumov comment:9

Replying to [comment:8 timmywil]:

Replying to [comment:7 mnaoumov]: I don't understand. You can do both of those. http://jsfiddle.net/timmywil/mNvYG/1/

Try to change on your jsfiddle example jQuery version from 'edge' to '1.5.1'.

You will see the issue.

On my project I'm using 1.5.2 and having the same issue.